Breadcrumb
Where the current page sits in the hierarchy, and how to get back up it.
- Navigation
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add breadcrumbnpm packages installed: radix-ui.
import { Breadcrumb } from "@/components/ui/breadcrumb";Default
Collapsed
Custom Separator
Single Level
Animated
<Breadcrumb>
Plus every attribute of <nav>.
<BreadcrumbList>
| Prop | Type | Default |
|---|---|---|
animatedBrings the trail in one entry after another when it mounts, sliding from the inline start. Off by default: a breadcrumb is read on every page, and motion there gets old fast. Stops under reduced motion. | boolean | false |
Plus every attribute of <ol>.
<BreadcrumbItem>
Plus every attribute of <li>.
<BreadcrumbLink>
| Prop | Type | Default |
|---|---|---|
asChildRender the child as the link, for a router's own component. | boolean | false |
Plus every attribute of <a>.
<BreadcrumbPage>
Plus every attribute of <span>.
<BreadcrumbSeparator>
Plus every attribute of <li>.
<BreadcrumbEllipsis>
Plus every attribute of <span>.
The current page is a span carrying aria-current="page", not a link: a link to the page you are already on does nothing, and in a list of links it is indistinguishable from the ones that go somewhere. Separators are hidden from assistive technology, because the list already conveys the sequence and reading "slash" between every item is the design's punctuation leaking into the content. The ellipsis is the exception and is named, because it is content: it says levels have been left out. The optional entrance stagger stops under reduced motion.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes