Components/Breadcrumb

Breadcrumb

현재 페이지의 경로를 탐색할 수 있는 브레드크럼 컴포넌트입니다.

Installation

bash
npx axis-cli add breadcrumb

Usage

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

separator
Type:React.ReactNode
Default:"/"

구분자 커스터마이징

children
Type:React.ReactNode
Default:-

브레드크럼 내용

className
Type:string
Default:-

추가 CSS 클래스