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

Prop	Type	Default	Description
`separator`	`React.ReactNode`	"/"	구분자 커스터마이징
`children`	`React.ReactNode`	-	브레드크럼 내용
`className`	`string`	-	추가 CSS 클래스

separator

Type:React.ReactNode

Default:"/"

구분자 커스터마이징

children

Type:React.ReactNode

Default:-

브레드크럼 내용

className

Type:string

Default:-

추가 CSS 클래스

Accessibility

nav 랜드마크와 정렬 목록으로 구성된 탐색 경로입니다.

Key	Action
`Tab`	경로 내 링크 사이를 이동합니다.

nav 요소에 접근 가능한 이름(예: aria-label="Breadcrumb")을 제공하세요.
현재 페이지 항목에는 aria-current="page"를 지정하세요.