Breadcrumb

"use client"

import {

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add breadcrumb
コピー

使い方#

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

コピー<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

構成#

次の構成を使用して、Breadcrumb を構築します。

コピーBreadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    └── BreadcrumbItem
        └── BreadcrumbPage

基本#

ホーム リンクとコンポーネント リンクを含む基本的なブレッドクラム。

import {
  Breadcrumb,
  BreadcrumbItem,

カスタム区切り文字#

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

"use client"

import Link from "next/link"

ドロップダウン#

<BreadcrumbItem /> を <DropdownMenu /> と組み合わせて、パンくずリストにドロップダウンを作成できます。

"use client"

import Link from "next/link"

折りたたまれた#

ブレッドクラムが長すぎる場合に折りたたまれた状態を表示する <BreadcrumbEllipsis /> コンポーネントを提供します。

"use client"

import Link from "next/link"

リンクコンポーネント#

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

"use client"

import Link from "next/link"

RTL#

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import Link from "next/link"

API リファレンス#

ブレッドクラム#

Breadcrumb コンポーネントは、すべてのブレッドクラム コンポーネントをラップするルート ナビゲーション要素です。

ブレッドクラムリスト#

BreadcrumbList コンポーネントは、ブレッドクラム項目の順序付きリストを表示します。

ブレッドクラム項目#

BreadcrumbItem コンポーネントは、個々のブレッドクラム項目をラップします。

ブレッドクラムリンク#

BreadcrumbLink コンポーネントは、パンくずリストにクリック可能なリンクを表示します。

ブレッドクラムページ#

BreadcrumbPage コンポーネントは、ブレッドクラムに現在のページを表示します (クリック不可)。

ブレッドクラム省略記号#

BreadcrumbEllipsis コンポーネントは、折りたたまれたブレッドクラム項目の省略記号インジケーターを表示します。

詳細については、React Aria ドキュメント を参照してください。