Navigation

Breadcrumb

Dark Mode

N-depth 경로를 표시하는 Breadcrumb 컴포넌트입니다. 각 항목의 링크는 선택적이며, 마지막 항목은 현재 페이지로 강조됩니다. MainHeader 내부에서 조합되거나 단독으로 사용할 수 있습니다.

import { Breadcrumb } from "@/shared/ui/common/navigation"

인터랙티브 데모

Depth

href 링크

tsx

<Breadcrumb
  items={[
    { label: "검색·DB", href: "/search" },
    { label: "인물 DB" },
  ]}
/>

1~N depth를 지원합니다. 마지막 항목은 현재 페이지로 굵게 표시됩니다.

href가 없는 항목은 클릭 불가 텍스트로 표시됩니다.

Prop	Type	Required	Default	설명
`items`	`BreadcrumbItem[]` interface BreadcrumbItem { label: string; href?: string; }	✓	—	Breadcrumb 항목 목록 (1개 이상)
`className`	`string`	—	—	추가 CSS 클래스

Prop	Type	Required	Default	설명
`label`	`string`	✓	—	표시 텍스트
`href`	`string`	—	—	클릭 시 이동할 경로 (없으면 텍스트만 표시)