Breadcrumb
현재 페이지의 위치와 탐색 경로를 표시하는 컴포넌트
개요
Breadcrumb 컴포넌트는 사용자가 현재 사이트 내에서 어디에 있는지 보여주고, 상위 페이지로 쉽게 이동할 수 있게 하는 탐색 보조 요소입니다. nav 요소와 aria-label="breadcrumb"이 자동 적용됩니다.
주요 특징
- ✅ Compound 구조: List, Item, Link, Page, Separator, Ellipsis 조합
- ✅ 시맨틱 마크업:
nav+ol구조와aria-label자동 적용 - ✅ 현재 페이지 표시: BreadcrumbPage에
aria-current="page"자동 적용 - ✅ 커스텀 구분자: Separator에 원하는 아이콘/문자 사용 가능
- ✅ 축약 표시: Ellipsis로 긴 경로 축약 지원
- ✅ 디자인 토큰: CSS 변수 기반 테마 커스터마이징 지원
사용 예시
기본 사용법
Preview
커스텀 구분자
BreadcrumbSeparator에 자식 요소를 전달하면 기본 화살표 대신 사용됩니다.
Preview
경로 축약 (Ellipsis)
경로가 길 때 중간 항목을 BreadcrumbEllipsis로 축약할 수 있습니다.
Preview
API Reference
Breadcrumb Props
nav 요소로 렌더링되며 aria-label="breadcrumb"이 자동 적용됩니다.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
BreadcrumbList Props
ol 요소로 렌더링되는 경로 목록 컨테이너입니다.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
BreadcrumbItem Props
li 요소로 렌더링되는 개별 경로 항목입니다.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
BreadcrumbLink Props
이동 가능한 경로 링크입니다. a 요소로 렌더링됩니다.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | 링크 URL |
render | React.ReactNode | - | 커스텀 렌더링 요소 (예: Link) |
className | string | - | 추가 CSS 클래스 |
BreadcrumbPage Props
현재 페이지를 나타냅니다. aria-current="page"가 자동 적용됩니다.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-disabled | boolean | - | 비활성 상태 표시 |
className | string | - | 추가 CSS 클래스 |
BreadcrumbSeparator Props
경로 사이의 구분자입니다. 자식이 없으면 기본 ChevronRight 아이콘이 표시됩니다.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | 커스텀 구분자 |
className | string | - | 추가 CSS 클래스 |
BreadcrumbEllipsis Props
축약된 경로를 나타내는 생략 기호(MoreHorizontal 아이콘)입니다.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
기본 사용법
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@vortex/ui-foundation"
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">홈</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>현재 페이지</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>접근성
시맨틱 마크업
nav요소에aria-label="breadcrumb"이 자동 적용됩니다ol/li구조로 경로의 순서를 스크린 리더에 전달합니다- 현재 페이지(BreadcrumbPage)에
aria-current="page"와aria-disabled="true"가 적용됩니다 - Separator와 Ellipsis는
aria-hidden="true"로 스크린 리더에서 제외되며, Ellipsis에는 스크린 리더용 “More” 텍스트가 포함됩니다
권장 사항
- ✅ 마지막 항목은 링크가 아닌 BreadcrumbPage로 표시
- ✅ 링크 텍스트는 해당 페이지를 명확히 나타내는 이름 사용
- ❌ 최상위 페이지 등 경로가 1단계인 경우 불필요하게 사용하지 않기
관련 컴포넌트
- Tabs: 콘텐츠 전환 탐색
- DropdownMenu: 축약된 경로 항목을 메뉴로 표시
- Separator: 콘텐츠 구분선