Docs
Breadcrumb

Breadcrumb

現在のリソースへのパスをリンクの階層を使用して表示する

インストール

npx shadcn-ui@latest add breadcrumb

使用方法

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">コンポーネント</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

例

カスタムセパレータ

<BreadcrumbSeparator /> の children にカスタムコンポーネントを使用すると、カスタムセパレータを作成できます。

import { Slash } from "lucide-react"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <Slash />
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">コンポーネント</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

ドロップダウン

Breadcrumb に <DropdownMenu /> を <BreadcrumbItem /> と組み合わせることで、ドロップダウンを作成できます。

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
 
...
 
<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      コンポーネント
      <ChevronDownIcon />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>ドキュメント</DropdownMenuItem>
      <DropdownMenuItem>テーマ</DropdownMenuItem>
      <DropdownMenuItem>GitHub</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

折りたたみ

breadcrumb が長すぎると折りたたまれた状態を表示する <BreadcrumbEllipsis /> コンポーネントを提供します。

import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    {/* ... */}
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

リンクコンポーネント

ルーティングライブラリ独自のカスタムリンクコンポーネントを使用するには、<BreadcrumbLink /> の asChild プロパティを使用できます。

import { Link } from "next/link"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

レスポンシブ

<BreadcrumbItem /> を <BreadcrumbEllipsis />、<DropdownMenu />、<Drawer /> と組み合わせてコンポーネント化したレスポンシブな breadcrumb の例です。

デスクトップではドロップダウンが、モバイルではドロワーが表示されます。