@fluixi-ui/breadcrumb

Accessible breadcrumb navigation.

A headless breadcrumb trail: a <nav> landmark wrapping an ordered list of links that ends in the current page. Compose it from the parts.

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@fluixi-ui/breadcrumb';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Profile</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Parts

• Breadcrumb — the <nav> landmark. label sets its accessible name (default Breadcrumb).
• BreadcrumbList — the <ol> of items.
• BreadcrumbItem — an <li> wrapping a link, page, or ellipsis.
• BreadcrumbLink — a navigable <a>. Pass as={RouterLink} to integrate with a router.
• BreadcrumbPage — the current page (last item); carries aria-current="page", not a link.
• BreadcrumbSeparator — the decorative divider between items. Defaults to /; pass children for an icon.
• BreadcrumbEllipsis — a … indicator for collapsed trails; pair with a menu that reveals the hidden ancestors.

All other props (including class and style) are forwarded to the underlying element.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.