Components
Breadcrumb
계층 네비게이션 경로 표시.
Platform: Web · Desktop only. 모바일에선 navigation 패턴으로 대체.
Mobile
Breadcrumb은 모바일에 사용하지 않는다. 화면 폭이 좁아 전체 경로를 노출하면 가독성을 해친다. 모바일은 다음 패턴 중 하나를 사용:
- Back 버튼 + 현재 라벨: 헤더 좌측 chevron back 아이콘 + 우측에 현재 페이지 라벨. iOS·Android 모두 표준 네비게이션 패턴
- 단일 parent label: 상위 1단계 경로만 노출 (예: "← 폴더 / 현재 노트"). 깊은 계층은 생략하고 사용자가 back 반복으로 거슬러 올라가게
- Drilldown indicator: 헤더 타이틀 옆 chevron으로 현재 위치를 드러내되 클릭 시 DropdownMenu Mobile (Action Sheet)로 상위 경로 목록 노출
깊은 계층 네비게이션이 핵심 정보 구조라면 디자인 자체를 재검토 — 모바일은 평면적인 IA가 적합.
Preview
Token Mapping
| Token | Value | Description |
|---|---|---|
| link text | label2Medium, stone-600 | 클릭 가능 |
| link hover | brown-700 | |
| current text | label2Medium, stone-700 | 클릭 불가 |
| separator | > 또는 ChevronRight | stone-400 |
Usage
<Breadcrumb>
<BreadcrumbItem href="/">홈</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem href="/notes">노트</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>Q4 planning</BreadcrumbItem> {/* current */}
</Breadcrumb>A11y
<nav aria-label="breadcrumb">권장- Current item에
aria-current="page"
Do / Don't
- Do: 네비게이션 레벨 ≥ 2일 때만 표시
- Don't: 2단계 미만에서 Breadcrumb 사용 금지 (의미 없음)
- Don't: 모바일에서 Breadcrumb 생략 또는 TopNavigation back button으로 대체