パンくずリスト

パンくずリストは、アプリケーション内の現在のページまたはリソースへのリンクの階層を表示します。

インストール

npx nextui-cli@latest add breadcrumbs

上記のコマンドは、個別インストール専用です。もし@nextui-org/react がグローバルにインストール済みであれば、このステップをスキップできます。 @nextui-org/react がすでにグローバルにインストールされている場合は、この手順をスキップできます。

インポート

NextUIは、2つのパンくずリスト関連コンポーネントをエクスポートします。

• Breadcrumbs: メインコンポーネントで、他のコンポーネントのラッパーです。
• BreadcrumbItem: パンくずリストの項目を表すコンポーネントです。

使い方

無効化

無効化されたパンくずリストは項目を表示しますが、ナビゲーションを無効にして、一貫したレイアウトを確保します。現在のページを示す最後の項目は無効化されません。

サイズ

色

バリアント

下線

角丸

ルーティング

<BreadcrumbItem> コンポーネントは、Next.js や React Router のようなフレームワークやクライアントサイドのルーターと連携して動作します。設定方法については、ルーティングガイドを参照してください。

制御された状態

isCurrent と onAction プロパティを使用することで、現在の/アクティブなアイテムを制御できます。

注意: 必要に応じて、onPress プロパティを使用して、パンくずリストの項目でのクリックイベントを処理できます。

メニュータイプ

Breadcrumbs コンポーネントを水平メニューとして使用することも可能です。これは、可能なナビゲーションのリストを表示し、ユーザーにそのうちの1つを選択させたい場合に便利です。

開始 & 終了コンテンツ

startContent と endContent プロパティを使用することで、パンくずリストの開始または終了に任意の要素を追加できます。上記の例では、startContent プロパティを使用してパンくずリストの開始にアイコンを追加しています。

カスタムセパレーター

separator プロパティを使用することで、パンくずリスト間のセパレーターをカスタマイズできます。

カスタムアイテム

BreadcrumbItem コンポーネントは、その子要素として任意の要素を受け入れます。これにより、パンくずリストの項目の外観をカスタマイズできます。

上記の例では、Dropdown コンポーネントを使用して、パンくずリストにドロップダウンメニューを作成しています。

Breadcrumbs コンポーネントは、その子要素として BreadcrumbItem コンポーネントのみを認識します。つまり、Breadcrumbs コンポーネントの内部に他のコンポーネントを直接配置することはできません。

// ❌ This will not work,
// The Button will not be picked by the Breadcrumbs component.
<Breadcrumbs>
  <BreadcrumbItem>Item 1</BreadcrumbItem>
  <Button>Item 2</Button>
</Breadcrumbs>

// ✅ Instead, you can wrap the Button inside a BreadcrumbItem.
<Breadcrumbs>
  <BreadcrumbItem>Item 1</BreadcrumbItem>
  <BreadcrumbItem>
    <Button>Item 2</Button>
  </BreadcrumbItem>
</Breadcrumbs>

アイテムの折りたたみ

Breadcrumb コンポーネントには、アイテムの折りたたみを制御するための3つのプロパティがあります。

• maxItems: 表示するパンくずリストの最大数を指定します。最大数を超える場合、最初から itemsBeforeCollapse 個と最後から itemsAfterCollapse 個のみが表示され、その間に省略記号が表示されます。
• itemsBeforeCollapse: 最大項目数を超えた場合、省略記号の前に表示する項目数。
• itemsAfterCollapse: 最大項目数を超えた場合、省略記号の後に表示する項目数。

注意: 省略記号の項目は、最初の折りたたまれた項目の href プロパティを使用します。

省略記号項目のカスタマイズ

renderEllipsis プロパティを使用することで、省略記号の項目をカスタマイズできます。このプロパティは、React要素を返す関数を受け入れます。

スロット

• パンくずリストのスロット

• base: パンくずリストのメインスロット。list スロットをラップします。

• list: パンくずリストのラッパー。

• ellipsis: 省略記号（…）を表示するためのスロット。ブレッドクラムが折りたたまれた場合にのみ表示されます。

• separator: カスタムセパレーター用のスロット。 separator プロパティで設定できます。

• BreadcrumbItem スロット

• base: ブレッドクラムアイテムのメインスロット。item スロットをラップします。

• item: ブレッドクラムアイテムのラッパー。

• separator: アイテムセパレーター用のスロット。

ブレッドクラムのスタイルをカスタマイズする

Breadcrumbs のスタイルは、classNames プロパティを使用し、アイテムのスタイルは itemClasses プロパティを使用してカスタマイズできます。

データ属性

BreadcrumbItem の item 要素には、以下の属性があります。

• data-current: ブレッドクラムアイテムが現在のアイテムである場合に設定されます。ブレッドクラムの isCurrent プロパティ、またはアイテムが最後のものであるかどうかに基づきます。
• data-disabled: ブレッドクラムアイテムが無効になっている場合に設定されます。ブレッドクラムの isDisabled プロパティに基づきます。
• data-focus: ブレッドクラムアイテムがフォーカスされている場合に設定されます。useFocusRing に基づきます。
• data-focus-visible: ブレッドクラムアイテムがキーボードでフォーカスされている場合に設定されます。useFocusRing に基づきます。

アクセシビリティ

• 順序付きリストとして実装されています。
• ブレッドクラムでのマウス、タッチ、キーボード操作をサポートしています。
• <a> 要素またはARIAによるカスタム要素タイプを介したナビゲーションリンクをサポートします。
• ランドマークナビゲーション領域に対するローカライズされたARIAラベルをサポートします。
• 無効化されたブレッドクラムをサポートします。
• 最後のアイテムは、aria-current を使用して、現在のページとして自動的にマークされます。

API

Breadcrumbs のプロパティ

パンくずリストの機能

パンくずリストのイベント

BreadcrumbItem のプロパティ

BreadcrumbItem のイベント

型

省略記号のレンダリング関数

export type RenderEllipsisItemProps = {
  /**
   * The collapsed items.
   */
  items: BreadcrumbItemProps[];
  /**
   * The max number of items.
   */
  maxItems: number;
  /**
   * The picked item to render the ellipsis.
   */
  collapsedItem: ReactNode;
  /**
   * The default ellipsis icon.
   */
  ellipsisIcon: ReactNode;
  /**
   * Number of items to show before the ellipsis.
   */
  itemsBeforeCollapse: number;
  /**
   * Number of items to show after the ellipsis.
   */
  itemsAfterCollapse: number;
  /**
   * The separator between each breadcrumb. It is a chevron by default.
   */
  separator: ReactNode;
};

renderEllipsis: (props: RenderEllipsisItemProps) => ReactNode;