Installation
bash
npx axis-cli add breadcrumbUsage
tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@axis-ds/ui-react'
export function Example() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">홈</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">컴포넌트</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}Components
Breadcrumb브레드크럼 루트 (nav 요소)
BreadcrumbList브레드크럼 목록 (ol 요소)
BreadcrumbItem개별 브레드크럼 아이템 (li 요소)
BreadcrumbLink탐색 가능한 링크
BreadcrumbPage현재 페이지 (링크 없음)
BreadcrumbSeparator아이템 간 구분자
Props
| Prop | Type | Default | Description |
|---|---|---|---|
separator | React.ReactNode | "/" | 구분자 커스터마이징 |
children | React.ReactNode | - | 브레드크럼 내용 |
className | string | - | 추가 CSS 클래스 |
separatorType:
React.ReactNodeDefault:
"/"구분자 커스터마이징
childrenType:
React.ReactNodeDefault:
-브레드크럼 내용
classNameType:
stringDefault:
-추가 CSS 클래스