Breadcrumb
A navigational landmark that shows the user's current location within a site hierarchy.
Installation
npx dafink-ui add breadcrumbDemo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | Array<{ label: string; href?: string; onClick?: () => void }> | - | Ordered list of crumbs. The last item is the current page and should have no href. An item with onClick renders as a button (for in-page navigation) instead of a Link. |
| separator | ReactNode | "/" | Rendered between each item. Accepts strings or any React element. |
| className | string | "" | Additional classes applied to the wrapping nav element. |
Accessibility
Breadcrumb has no composite keyboard handling: it renders a row of native links (or, for an item with an onClick handler, a native button) reached and left via normal Tab order, with no arrow-key navigation between crumbs. The list is a nav element labeled aria-label="breadcrumb" wrapping an ol, the current page renders as a plain span with aria-current="page" rather than a link, and separators carry aria-hidden="true" so assistive technology skips over them.