Breadcrumb
현재 페이지가 정보 구조에서 어디에 있는지 보여줍니다.
- 성숙도
- 후보
- 소스 경로
components/ui/breadcrumb.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/react
실제 미리보기
사용할 때
사용 기준
두 단계 이상 깊은 문서나 관리 화면에서 상위 경로를 제공할 때 씁니다.
사용하지 않을 때
단일 단계 페이지나 진행 단계를 설명하는 용도로 쓰지 않습니다.
변형과 상태
default고정 예시현재 페이지와 이동 가능한 상위 경로를 구분합니다.
collapsed고정 예시긴 중간 경로는 이름 있는 Ellipsis로 축약합니다.
접근성
이름 있는 nav, 순서 목록, 현재 페이지와 숨겨진 구분자를 사용합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
aria-label | string | 아니요 | 여러 탐색 영역을 구분하는 이름입니다. |
label | string | 예 | BreadcrumbEllipsis의 접근 가능한 이름입니다. |
사용 예시
지원 importimport {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Design</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>