Breadcrumbs

현재 위치

Small blue links separated by a light grey “/”; only the current page is in bold dark text.

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

Also known as: BreadcrumbsBreadcrumbs

···

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'>;
}

slash has only slashes between items. chevron swaps the slash for a small chevron icon on the same line. Path links are blue and the current location is bold dark text, so you can tell at a glance where the links end.

There is no underline or box, so it takes almost no space inside a post head or page head. On long titles the current item is cut with an ellipsis. The slash is plain text at the same size as the links; the chevron is a small icon, so the separator looks thinner.

The slash is Primer’s original look; the chevron is a variation using an Octicons chevron icon.

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