Breadcrumb

ページの階層構造を示すパンくずリストコンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/breadcrumb.json

Usage

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

<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">ホーム</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="#">設定</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>プロフィール</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>

Two Levels

<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">ダッシュボード</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>日程調整</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>

Deep Hierarchy

<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">ホーム</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="#">プロジェクト</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="#">チーム合宿</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>日程調整</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>

Props

BreadcrumbSeparator は children を渡すことでセパレーターアイコンをカスタマイズできます。省略時は ChevronRight が使用されます。

Prop	Type	Default	Description
children	ReactNode	-	BreadcrumbSeparator のカスタムアイコン（省略時は ChevronRight）