Breadcrumb

A navigation trail with <nav aria-label="Breadcrumb"> and aria-current="page" on the last item.

Preview

Usage

import { Breadcrumb } from "anexui";

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Docs", href: "/docs" },
    { label: "Button" },
  ]}
/>

Custom separator

<Breadcrumb
  separator="›"
  items={[
    { label: "Home", href: "/" },
    { label: "Components", href: "/docs/components" },
    { label: "Breadcrumb" },
  ]}
/>

SPA navigation (onClick)

<Breadcrumb
  items={[
    { label: "Home", onClick: () => router.push("/") },
    { label: "Settings", onClick: () => router.push("/settings") },
    { label: "Profile" },
  ]}
/>

Breadcrumb Item Shape

| Field | Type | Description | |---|---|---| | label | string | Required. Visible text | | href | string | Renders as an <a> link | | onClick | MouseEventHandler | SPA navigation handler |

BreadcrumbProps

| Prop | Type | Default | Description | |---|---|---|---| | items | BreadcrumbItem[] | — | Required. Ordered list of crumbs | | separator | ReactNode | "/" | Character or node between items |

All standard HTML <nav> attributes are accepted.

Accessibility

• Wrapped in <nav aria-label="Breadcrumb">
• Last item gets aria-current="page" and is rendered as plain text (not a link)
• Separators are aria-hidden to avoid noisy screen reader output