Breadcrumbs

현재 위치

One line of small gray text where only the last step is black. Steps are separated by chevrons or slashes.

RuleThe last step is marked as “you are here”, not as a link.

Also known as: 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 places a thin chevron icon between steps, which makes the path a little clearer. slash uses the same text with a single slash mark, which is quieter. Neither has underlines or boxes, and a long post title is cut with an ellipsis to keep one line.

On a white page both are barely noticeable. Choose chevron if the path should act as a guide, slash if it should be almost invisible. Seven sites use slash.

It follows shadcn’s Breadcrumb as is, with the chevron as its default separator.

Use it when — Variants 2

chevronChevron When the pack’s icon set has a chevron and you want the path to stand out a little.Used by 4: babysick, milestone, newborn, toddlerfood
slashSlash When you want it quiet — text and slashes only.Used by 7: babyfood, babyplay, babysleep, birthprep, feeding, vaccination, 허브

Same component, other packs

03Breadcrumbs현재 위치

03Breadcrumbs현재 위치

03Breadcrumbs현재 위치

Use it when — Variants 2