Shows where a page sits in the site's hierarchy, with links back up to each level.
$ pnpm dlx shadcn@latest add https://dashral.com/r/breadcrumb.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/breadcrumb.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/breadcrumbUsage
import { Breadcrumb } from "@/components/dashral/breadcrumb"
<Breadcrumb
items={[
{ label: "Home", href: "/" },
{ label: "Customers", href: "/customers" },
{ label: "Olivia Martin" },
]}
/>Examples
Collapsed with a custom separator
Past maxItems the middle collapses into an ellipsis that expands the trail.
File browser
Open folders and the trail follows; any crumb takes you back, and deep paths collapse in the middle.
API reference
Breadcrumb
Also takes every prop of <nav>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
items | { label, href?, icon? }[]The trail, in order; the last is the current page. Required. | — |
linkAs | ElementTypeYour router's link, e.g. Next.js Link. | "a" |
maxItems | numberLonger trails collapse their middle into an ellipsis that expands them. | — |
separator | ReactNodeBetween items, e.g. <Slash />. | <ChevronRight /> |
aria-label | stringThe landmark's name. | "Breadcrumb" |
moreLabel | stringWhat the ellipsis says to screen readers, in your language. | "Show {count} more pages" |
classNames | { list, item, link, page, separator }Classes for each part. | — |
Accessibility
- A nav landmark named “Breadcrumb” with an ordered list, so screen readers say how many levels there are.
- The current page has aria-current="page"; separators are hidden from assistive technology; the ellipsis says how many pages it hides.