현재 위치

Breadcrumbs

작은 회색 글자로 「홈 > 주제 > 글」을 이어요. 꺾쇠 아이콘이 KRDS 기본이고, 빗금 변형은 더 조용해요.

쓰는 규칙마지막 칸은 링크가 아니라 「지금 여기」로 표시한다.

다른 이름: Breadcrumbs

···

usage (Astro)

---
// design-systems/krds/components/PageHead.astro
// Breadcrumbs 은 이 파일 안에서 쓰인다(팩 구현끼리)
---
<Breadcrumbs items={crumbs} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Breadcrumbs": "chevron" }
}

props (TypeScript)

export interface BreadcrumbsProps {
  items: Crumb[];
  variant?: VariantOf<'Breadcrumbs'>;
}

두 변형은 구분 기호만 달라요. chevron 은 얇은 꺾쇠 아이콘, slash 는 옅은 회색 빗금 글자예요. 글자 크기와 간격은 같고, 긴 마지막 제목은 말줄임(…)으로 잘려요.

눈에 띄지 않는 보조 길 안내라서 어느 쪽을 골라도 페이지 인상이 크게 달라지진 않아요. 꺾쇠가 클릭할 수 있는 길 안내라는 느낌이 조금 더 분명하고, 빗금은 글 머리 위에 더 가볍게 얹혀요.

꺾쇠는 KRDS 기본 모양이에요.

이럴 때 — 변형 2

chevron꺾쇠 팩의 아이콘 세트에 꺾쇠가 있고, 경로를 눈에 띄게 하고 싶을 때.쓰는 사이트 4곳: babysick, milestone, newborn, toddlerfood
slash빗금 아이콘 없이 글자만으로 조용하게 두고 싶을 때.쓰는 사이트 7곳: babyfood, babyplay, babysleep, birthprep, feeding, vaccination, 허브