현재 위치

Breadcrumbs

빗금은 링크 뒤에 붙고, 꺾쇠는 항목 앞에 붙는 회색 아이콘이에요. 14px 글자에 링크는 파란색, 현재 위치만 검은 글자예요.

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

다른 이름: 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는 Carbon 기본 방식이에요. 항목 사이에 「/」가 들어가고, 현재 위치 뒤에는 붙이지 않아요. 다만 주제 머리나 글 머리처럼 현재 페이지 이름이 경로 밖에 제목으로 따로 있는 곳에서는 맨 끝에 빗금이 하나 남아 보여요. chevron은 같은 자리에 꺾쇠 아이콘을 둬요. 두 변형 모두 링크에 밑줄이 없고, 마우스를 올릴 때만 밑줄이 생겨요.

한 줄로 끝나는 아주 작은 요소라 모양 차이가 크지 않아요. 같은 사이트의 다른 부분이 Carbon 말투(「/」와 가는 선)라면 slash가, 아이콘이 많은 화면이라면 chevron이 어울려요.

이럴 때 — 변형 2

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