Breadcrumbsパンくずリスト

現在のページの階層構造を示し、上位ページへの移動を可能にするナビゲーションコンポーネントです。

更新 2026/8/26

基本的な使い方

Breadcrumbs内で、BreadcrumbItemを連ねて使用します。現在のページにはcurrent propsを指定してください。icon propsで各項目にアイコンを表示できます。

import { BreadcrumbItem, Breadcrumbs } from "@serendie/ui";
import { SerendieSymbolArticle, SerendieSymbolHome } from "@serendie/symbols";

export function BasicSample() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="/" icon={<SerendieSymbolHome />}>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem href="/category" icon={<SerendieSymbolArticle />}>
        Category
      </BreadcrumbItem>
      <BreadcrumbItem href="/subcategory" icon={<SerendieSymbolArticle />}>
        Subcategory
      </BreadcrumbItem>
      <BreadcrumbItem current icon={<SerendieSymbolArticle />}>
        Current Page
      </BreadcrumbItem>
    </Breadcrumbs>
  );
}

サイズ

MediumとSmallの2種類があります。

Medium

Small

import { BreadcrumbItem, Breadcrumbs } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <Dl>
      <Dt>Medium</Dt>
      <Dd>
        <Breadcrumbs>
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/category">Category</BreadcrumbItem>
          <BreadcrumbItem current>Current Page</BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
      <Dt>Small</Dt>
      <Dd>
        <Breadcrumbs size="small">
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/category">Category</BreadcrumbItem>
          <BreadcrumbItem current>Current Page</BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
    </Dl>
  );
}

区切り文字

ChevronとSlashの2種類があります。separator propsで指定してください。

Chevron

Slash

import { BreadcrumbItem, Breadcrumbs } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function SeparatorSample() {
  return (
    <Dl>
      <Dt>Chevron</Dt>
      <Dd>
        <Breadcrumbs separator="chevron">
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/category">Category</BreadcrumbItem>
          <BreadcrumbItem current>Current Page</BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
      <Dt>Slash</Dt>
      <Dd>
        <Breadcrumbs separator="slash">
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/category">Category</BreadcrumbItem>
          <BreadcrumbItem current>Current Page</BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
    </Dl>
  );
}

省略表示

maxItems propsで表示する項目数を制限できます。超過した中間の項目は省略記号にまとめられます。省略記号をクリックすると省略された項目が展開されます。

With Ellipsis

import { BreadcrumbItem, Breadcrumbs } from "@serendie/ui";
import { SerendieSymbolArticle, SerendieSymbolHome } from "@serendie/symbols";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function CollapseSample() {
  return (
    <Dl>
      <Dt>With Ellipsis</Dt>
      <Dd>
        <Breadcrumbs maxItems={3}>
          <BreadcrumbItem href="/" icon={<SerendieSymbolHome />}>
            Home
          </BreadcrumbItem>
          <BreadcrumbItem href="/category" icon={<SerendieSymbolArticle />}>
            Category
          </BreadcrumbItem>
          <BreadcrumbItem href="/subcategory" icon={<SerendieSymbolArticle />}>
            Subcategory
          </BreadcrumbItem>
          <BreadcrumbItem href="/detail" icon={<SerendieSymbolArticle />}>
            Detail
          </BreadcrumbItem>
          <BreadcrumbItem current icon={<SerendieSymbolArticle />}>
            Current Page
          </BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
    </Dl>
  );
}