パンくずリスト

使用方法

基本的な使用

パンくずリストは自動的にページ階層を検出して表示します。

基本サンプル

<Breadcrumb />

カスタムパス指定

配列形式（文字列）

パス階層を文字列配列で指定できます。

配列形式（文字列）サンプル

---
const breadcrumb = ["/components/", "/components/box/"];
---
<Breadcrumb paths={breadcrumb} />

配列形式（オブジェクト）

タイトルとパスを持つオブジェクトの配列で指定できます。パスが空文字列（""）の場合、リンクになりません。

配列形式（オブジェクト）サンプル

<!-- eslint-disable-next-line -->
<Breadcrumb paths={[
  { title: "Components", path: "/components/" },
  { title: "カスタムパス" },
  { title: "カスタムパス2", path: "" },
  { title: "カスタムタイトル", path: "/components/box/" }
]} />