breadcrumb

Accessible breadcrumb navigation — a trail of links ending in the current page.

A headless breadcrumb: a <nav> landmark wrapping an ordered list of links. Purely structural — compose it from the parts. BreadcrumbLink accepts an as prop for router integration; BreadcrumbPage marks the current page and is not a link.

Installation

pnpm add @fluixi-ui/breadcrumb

Usage

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

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

Parts

Part	Description
`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}` for client-side routing.
`BreadcrumbPage`	The current page (last item); `aria-current="page"`, not a link.
`BreadcrumbSeparator`	Decorative divider. Defaults to `/`; pass children for an icon.
`BreadcrumbEllipsis`	A `…` indicator for collapsed trails.

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

Examples

breadcrumb

Installation

Usage

Parts