브레드크럼
현재 페이지가 속한 계층을 상위 경로부터 현재 위치까지 보여주는 시맨틱 navigation이다.
상태
compact
long label
활용 방법
계층 이동
상위 항목은 링크로 제공하고 마지막 항목은 aria-current page로 표시한다.
Preview
tsx
<Breadcrumbs items={[{ label: "프로젝트", href: "/project" }, { label: "컴포넌트", href: "/" }, { label: "브레드크럼" }]} />
커스텀 구분자
시각 언어에 맞는 아이콘을 separator로 전달할 수 있다.
Preview
tsx
<Breadcrumbs separator={<ChevronRight size={12} />} items={items} />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | readonly BreadcrumbItem[] | - | label, href, current로 구성된 경로 |
| separator | ReactNode | "/" | 항목 사이 시각 구분자 |
| aria-label | string | "Breadcrumb" | navigation 접근성 이름 |
| className | string | - | nav root 클래스 |