Breadcrumb

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Assets</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Domains</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>acme.com</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@zenoxai/ui/components/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/assets">Assets</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>acme.com</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Use a breadcrumb on detail pages two or more levels deep: an asset, an alert, a report. Every level except the last is a BreadcrumbLink; the last is a BreadcrumbPage, which is not a link. Put a BreadcrumbSeparator between items, not inside them.

BreadcrumbLink renders an <a>. To navigate with your router, render its link component through render; the breadcrumb keeps its styles:

<BreadcrumbLink render={<Link to="/alerts" />}>Alerts</BreadcrumbLink>

Do not use a breadcrumb for the steps of a flow. A page one level below the shell navigation needs no breadcrumb: the Sidebar already shows where the user is.

Examples

Collapsed

On deep paths, replace the middle levels with BreadcrumbEllipsis. Keep the first level and the last two.

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Acme Corp</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Vulnerabilities</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>CVE-2024-3400</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom separator

BreadcrumbSeparator renders a chevron by default. Pass an icon as children to replace it.

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Reports</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <SlashIcon />
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Monthly exposure, October 2026</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Accessibility

• Breadcrumb is a <nav aria-label="breadcrumb"> around an ordered list. Pass a translated aria-label when the interface is not in English.
• BreadcrumbPage carries aria-current="page". Separators and the ellipsis are hidden from screen readers.
• The ellipsis is decorative. If the hidden levels must stay reachable, put them in a Dropdown Menu whose trigger is a real button with an aria-label.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.