Navigation
Breadcrumbs
A hierarchical trail back to parent pages with current-page semantics.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add breadcrumbsWrites components/ui/breadcrumbs.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { Breadcrumbs } from "@/components/ui/breadcrumbs";API reference
Props and composition points for Breadcrumbs. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | None | Ordered trail. The last item renders as the current page. |
aria-label | string | "Breadcrumb" | Names the navigation landmark. |
className | string | None | Layout adjustments only. |
Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- Renders nav and ol semantics, with a chevron separator hidden from assistive technology.
- The final item uses aria-current=page and is not a link, even if an href is supplied.
- The component uses native anchors so it works in any framework. Swap in your router link for client-side navigation.
- Place breadcrumbs directly below the page H1, not above it.
Used in production
The Aback products whose interfaces shaped this component.