Breadcrumb

階層を示すパンくずリスト。

いま見ているページが階層のどこにあるかを示します。ドリルダウンする詳細ページ（/sales/$customerId など）で特に効きます。

export const client = "only";

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">ホーム</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/sales">売上</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Acme 株式会社</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@squadbase/vantage/ui";

パーツ

パーツ	役割
`BreadcrumbLink`	途中の階層（リンク）
`BreadcrumbPage`	現在地。リンクにしない
`BreadcrumbSeparator`	区切り。中身を渡せば記号を差し替えられる
`BreadcrumbEllipsis`	省略した中間階層

ルーターのリンクと組み合わせる

BreadcrumbLink は render プロップで別のコンポーネントに置き換えられます。Vantage の Link を渡せばクライアントサイド遷移になります。

import { Link } from "@squadbase/vantage/router";

<BreadcrumbLink render={<Link to="/sales" />}>売上</BreadcrumbLink>;