03 · Components · 탐색
브레드크럼Breadcrumb
현재 페이지의 위치를 계층적으로 표시. 3depth 이상 구조에서 사용자가 상위로 쉽게 되돌아갈 수 있게 합니다.
StableWCAG AA
기본
tsx
<Breadcrumb
items={[
{ label: "홈", href: "/" },
{ label: "컴포넌트", href: "/components" },
{ label: "브레드크럼" },
]}
/>미리보기
깊은 계층
5depth 이상에서는 중간 단계를 ...로 접어 제공할 수 있습니다. 이 패턴은 모바일 화면 너비 제약이 있을 때 유용합니다.
tsx
<Breadcrumb items={[{label:'홈',href:'/'}, /* ... */]} />미리보기
nav[aria-label="경로"]로 감싸고 현재 페이지 항목은 링크 대신 텍스트로 두며 aria-current="page"를 부여합 니다. 구분자 아이콘은 aria-hidden으로 스크린리더에서 숨깁니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label, href? }[] | 경로 배열. href가 없으면 링크가 아닌 텍스트로 렌더. |