Breadcrumbs
현재 위치와 상위 화면으로 가는 경로.
- 라이브러리 전용
개요
미리보기
예시
상태
5단계
축약
이렇게 · 이렇게 하지 않기
- 이렇게 세 단계 이상 깊은 계층(프로젝트 › 경험 › 기록)에만 쓴다.
- 이렇게 마지막 항목은 현재 위치이며 링크가 아니다.
- 이렇게 하지 않기 사용자 원문 제목은 번역하지 않고 말줄임만 한다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
items | readonly { label, href? }[] | — | 맨 위부터 현재 화면까지. 마지막 항목은 현재 위치(href 무시). 미리보기는 5단계. |
collapsed? | boolean | false | 가운데 단계를 “…” 버튼 뒤로 숨긴다(4단계 이상일 때). 누르면 그 자리에서 펼친다. |
ref | — | — | ref는 <nav>로 전달된다. |
@container | — | — | 좁은 폭(≈320)에서는 “← 상위 이름” 링크 하나만 보인다. |
| 그 밖의 속성 | — | — | id, aria-label(기본 “현재 위치”) 등 네이티브 nav 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: 링크와 “…” 버튼을 Tab으로 지난다.
- <nav aria-label="현재 위치"> + <ol>. 마지막 항목은 aria-current="page".
- 구분자는 CSS content의 빈 대체 텍스트라 읽히지 않는다.
- “…” 버튼 이름은 “숨은 단계 n개 보기”. 펼치면 버튼은 사라지고 단계 링크가 그 자리에 온다.