Breadcrumb
Where this page sits and how to get back up. Use it on pages two or more levels deep; the last crumb is the current page and is not a link.
bunx --bun shadcn@4.17.0 add @waimakers/breadcrumb- npm dependencies
- @base-ui/react@1.9.0lucide-react@1.33.0
From the registry
A labelled navigation trail with wrapping links, a current-page marker and decorative separators. Links accept Base UI render composition and the shared focus outline.
Examples
Trail
Links lead back up; the current page is marked for screen readers and not clickable.
Collapsed
Deep trails can fold the middle into an ellipsis and keep the first and last crumbs.
Custom separator
Pass any icon or character as the separator. It is hidden from screen readers.
Long names
Long names wrap rather than overflow, so the trail stays readable at 390px.
Focus
Every link takes the shared focus ring in the text colour.