Breadcrumb
경로 내비게이션 — nav + ol/li 시맨틱. 마지막 항목은 aria-current="page"의 현재 위치(링크 아님), 구분자는 장식 아이콘입니다.
마지막 업데이트 2026-06-11
한눈에#
페이지 계층에서 현재 위치까지의 경로를 보여주는 내비게이션입니다 — 마지막 항목은 링크가 아닌 현재 위치(aria-current="page")입니다.
- nav + ol/li 시맨틱
- aria-current=page
- 장식 구분자
- 현재=비링크
구분자 아이콘은 장식(aria-hidden) — 보조기술은 'n개 항목의 경로'로 읽습니다
사용 시점#
페이지 계층 경로의 현재 위치를 보여주면 Breadcrumb — 동등 뷰 전환이나 순차 진행 단계는 다른 컴포넌트입니다.
권장 — 이렇게 쓰세요
지양 — 이러지 마세요
쓴다 — 홈 › 섹션 › 현재처럼 페이지 계층에서 현재 위치까지의 경로 표시
대신 Tabs — 같은 레벨의 동등한 뷰를 전환할 때
대신 Stepper — 순차적 진행 단계(1·2·3)를 보여줄 때
플레이그라운드#
컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.
변형#
중간 항목에 href가 없으면 정적 텍스트로 렌더됩니다 — 그룹 라벨처럼
이동 대상이 아닌 단계를 표현할 때 씁니다.
크기#
size prop이 없습니다 — body-2 폰트의 단일 크기이며, 긴 경로는
줄바꿈(flex-wrap)으로 흘러내립니다.
상태#
- 링크 hover —
link-hover색 + 밑줄 - 링크 focus —
:focus-visible2pxfocus-ring링 - 현재 위치(마지막 항목) — 링크가 아닌
text색 + medium 굵기 텍스트
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
items | readonly BreadcrumbItem[] | — | 경로 항목 — BreadcrumbItem은 { label: string; href?: string } |
label | string | 브레드크럼 | nav aria-label (기본 '브레드크럼') |
ref | Ref<HTMLElement> | — | 루트 <nav>로 전달되는 ref (React 19 ref-as-prop) |
접근성#
<nav aria-label="브레드크럼">+ol/li— 보조기술이 “n개 항목의 경로”로 읽습니다- 마지막 항목은
aria-current="page"— 현재 위치이므로 링크가 아닙니다 - 구분자 ChevronRightIcon은 장식(
aria-hidden) — 낭독되지 않습니다 - 같은 페이지에 내비게이션이 여러 개면
label로 구분하세요
토큰#
component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).
| 속성 | 토큰 |
|---|---|
| 링크/정적 텍스트 | color.text-muted |
| 링크 hover | color.link-hover |
| 현재 위치 | color.text + font-weight.medium |
| 구분자 | color.text-placeholder · icon.size-sm |
| 형태 | font-size.body-2 · space.1 · radius.sm(포커스 링) |
| 모션 | duration.fast + ease.standard |