125k

Breadcrumb

PreviousNext

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

BaseRadixReact Aria
import Link from "next/link"

import {

インストール

pnpm dlx shadcn@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">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

構成

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

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

基本

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

import {
  Breadcrumb,
  BreadcrumbItem,

カスタム区切り文字

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

import Link from "next/link"
import { DotIcon } from "lucide-react"

ドロップダウン

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

import Link from "next/link"
import { ChevronDownIcon, DotIcon } from "lucide-react"

折りたたまれた

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

import Link from "next/link"

import {

リンクコンポーネント

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

import Link from "next/link"

import {

RTL

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

"use client"

import * as React from "react"

API リファレンス

ブレッドクラム

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

小道具タイプデフォルト
classNamestring-

ブレッドクラムリスト

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

小道具タイプデフォルト
classNamestring-

ブレッドクラム項目

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

小道具タイプデフォルト
classNamestring-

ブレッドクラムリンク

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

小道具タイプデフォルト
classNamestring-

ブレッドクラムページ

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

小道具タイプデフォルト
classNamestring-

ブレッドクラム区切り文字

BreadcrumbSeparator コンポーネントは、ブレッドクラム項目間の区切り文字を表示します。カスタムの子要素を渡すことで、デフォルトの区切りアイコンをオーバーライドできます。

小道具タイプデフォルト
childrenReact.ReactNode-
classNamestring-

ブレッドクラム省略記号

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

小道具タイプデフォルト
classNamestring-