/// Navigation
Breadcrumb
Breadcrumb trail — a mono UPPERCASE, "/"-separated path where crumbs are links and the last is the inked current page.
import { Breadcrumb } from "@protocore/pds";Basics
Wrap each crumb in a Breadcrumb.Item. Use Breadcrumb.Link for ancestors and Breadcrumb.Page for the current, non-interactive location. Separators are drawn by CSS.
Two levels
A breadcrumb earns its place from two levels up. Below that, a plain page title is enough.
When to use it
Use Breadcrumb to show where a page sits in a hierarchy and give a one-click path back up — deep console routes, nested resources, docs sections.
- Pair it with PageHeader: the breadcrumb sits above, the h1 restates the leaf.
- Moving between *pages of results* on one screen? That's Pagination, not a breadcrumb.
- Switching peer views of the current entity? Use Tabs.
- With a router, make each crumb a real link via
Breadcrumb.Link asChildwrapping your framework's<Link>.
Usage
Do
- Make Breadcrumb.Page the last crumb and never a link — it's the current page.
- Use asChild on Breadcrumb.Link to render a router link and keep client-side nav.
- Truncate long leaf labels (e.g. an id) rather than wrapping the trail.
- Keep the trail to the real hierarchy, not the user's click history.
Don't
- Don't show a breadcrumb one level deep — it adds noise without payoff.
- Don't use it as the primary navigation for a flat site.
- Don't make the current page a clickable link back to itself.
- Don't hand-draw "/" separators in markup — CSS renders them.
Accessibility
| Keys | Action |
|---|---|
| Tab | Move focus to the next crumb link |
| Enter | Follow the focused crumb link |
- The root renders a `<nav aria-label="Breadcrumb">` wrapping an ordered list, so assistive tech announces it as a landmark; override the label via `aria-label`.
- Breadcrumb.Page carries `aria-current="page"` and `aria-disabled="true"` so the current location is announced and not actionable.
Breadcrumb props
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | — | Overrides the default `"Breadcrumb"` accessible name. |
className | string | — | |
style | CSSProperties | — |