현재 위치

Breadcrumbs

작은 회색 글자 한 줄이고, 마지막 칸만 검게 보여요. 사이는 꺾쇠 아니면 빗금이에요.

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

다른 이름: BreadcrumbsBreadcrumb

···

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 는 같은 글자에 빗금 하나만 끼워서 더 조용해요. 둘 다 밑줄이나 상자가 없고, 긴 글 제목은 끝을 말줄임표로 잘라 한 줄을 지켜요.

흰 바탕 위에서는 어느 쪽이든 눈에 거의 띄지 않아요. 경로를 안내 역할로 살리고 싶으면 chevron, 있는 듯 없는 듯 두고 싶으면 slash 를 고르면 돼요. 일곱 사이트가 slash 를 쓰고 있어요.

shadcn 의 Breadcrumb 모양 그대로이고 chevron 이 기본 구분 기호예요.

이럴 때 — 변형 2

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