탐색과 공개@neumorphism-ui/breadcrumb

Breadcrumb

nav와 ol의 기본 시맨틱을 보존하며 링크, 현재 페이지, separator, 축약 표시를 조합할 수 있습니다. 현재 페이지는 aria-current=page로 자동 표시됩니다.

@neumorphism-ui/breadcrumb

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/breadcrumb

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

Example

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Breadcrumb`	`aria-label`	`string`	`"breadcrumb"`	경로 탐색 영역의 접근 가능한 이름입니다.
`BreadcrumbLink`	`href`필수	`string`	`—`	상위 경로의 실제 URL입니다.
`BreadcrumbPage`	`children`필수	`React.ReactNode`	`—`	현재 페이지 이름이며 aria-current=page가 적용됩니다.
`BreadcrumbSeparator`	`children`	`React.ReactNode`	`"/"`	보조기술에서 숨겨지는 시각적 구분자입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성