# Breadcrumb
- **Category:** Navigation (`navigation`)
- **Slug:** `navigation/breadcrumb`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Breadcrumb } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/navigation/breadcrumb
> Breadcrumb trail — a mono UPPERCASE, "/"-separated path where crumbs are links and the last is the inked current page.
## 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 asChild` wrapping your framework's ``.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `aria-label` | `string` | no | — | Overrides the default `"Breadcrumb"` accessible name. |
| `className` | `string` | no | — | — |
| `style` | `CSSProperties` | no | — | — |
## Examples
### 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.
```tsx
import { Breadcrumb } from "@protocore/pds";
export default function BreadcrumbBasics() {
return (
ConsoleNetworksEthereumEndpoint 0xA1…9F
);
}
```
### Two levels
A breadcrumb earns its place from two levels up. Below that, a plain page title is enough.
```tsx
import { Breadcrumb } from "@protocore/pds";
export default function BreadcrumbTwoLevel() {
return (
LedgerSettlements
);
}
```
## Do & don't
**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
**Keyboard**
| Keys | Action |
| --- | --- |
| `Tab` | Move focus to the next crumb link |
| `Enter` | Follow the focused crumb link |
**Notes**
- The root renders a `