UI ComponentsLayout
Breadcrumbs
Show a page's position in a navigation hierarchy.
Import
import { Breadcrumbs } from "@puzzle-ui/ui";Hierarchy
Provide linked ancestors followed by a current-page item without href. The last item receives aria-current="page".
API
| Prop | Type | Default | Description |
|---|---|---|---|
items | [...BreadcrumbLinkItem[], BreadcrumbCurrentItem] | Required | Linked ancestors and one final current item. |
aria-label | string | "Breadcrumbs" | Navigation landmark name. |
Each item has label: ReactNode and optional leadingIcon: ReactNode; ancestor items require href: string. Native nav attributes are forwarded. Use concise labels and keep the path meaningful on narrow screens.