Breadcrumb

현재 페이지가 속한 계층을 보여 주고 상위 페이지로 이동할 수 있게 할 때 사용합니다.

미리보기

중간 경로가 생략된 탐색

Components와 Navigation 링크, 생략 표시, 현재 Breadcrumb 페이지를 조합합니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/breadcrumb

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

BreadcrumbList 안에 BreadcrumbItem을 배치하세요. 상위 경로는 BreadcrumbLink, 현재 위치는 BreadcrumbPage를 쓰고 구분선은 다음 항목 안에 둡니다.

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

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API 레퍼런스

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

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

미리보기

중간 경로가 생략된 탐색

설치

사용법

API 레퍼런스

접근성