현재 위치

Breadcrumbs

작은 파란 링크 사이에 연한 회색 「/」가 끼고, 마지막 현재 글만 굵고 진한 글자예요.

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

다른 이름: 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는 항목 사이에 빗금만 있어요. chevron은 같은 줄에서 빗금 대신 작은 꺾쇠 아이콘이 들어가요. 경로 링크는 파란색이고, 지금 위치는 진한 글자로 굵게 보여서 어디까지가 링크인지 한눈에 갈려요.

밑줄도 상자도 없어서 글 머리나 주제 머리 안에 넣어도 자리를 거의 안 차지해요. 제목이 긴 글은 현재 항목이 「…」로 잘려요. 빗금은 글자 크기 그대로 이어지고, 꺾쇠는 작은 아이콘이라 구분 기호가 더 가늘게 보여요.

빗금 모양이 Primer 원본 그대로이고, 꺾쇠는 Octicons 꺾쇠 아이콘으로 바꾼 모양이에요.

이럴 때 — 변형 2

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