Breadcrumb

A breadcrumb trail showing where the page sits.

Shows where the current page sits in the hierarchy. Most useful on drill-down detail pages such as /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";

Parts

Part	Role
`BreadcrumbLink`	An ancestor (a link)
`BreadcrumbPage`	Where you are now — not a link
`BreadcrumbSeparator`	The divider; pass children to swap the glyph
`BreadcrumbEllipsis`	Collapsed middle levels

With the router’s link

BreadcrumbLink takes a render prop to become another component. Pass Vantage’s Link for client-side navigation.

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

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