Breadcrumbs

현재 위치

The slash trails each link, while the chevron is a grey icon placed before each item. 14px text, blue links, and only the current page in black.

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

slash is Carbon’s default. A "/" sits between items and none follows the current page, though in the page head and post header, where the current page is shown as the title outside the trail, one slash is left at the end. chevron puts a chevron icon in the same spot. In both, links have no underline until you hover.

It is a tiny one-line element, so the difference is small. If the rest of the site speaks Carbon (slashes, thin rules), slash fits; on icon-heavy screens chevron fits.

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