1 viewer
Component · Navigation
Breadcrumb
The trail from a section to the current page: earlier items link back, the last names where the reader is. Same markup as the `breadcrumb_html` string helper.
- Category
- Navigation
- Slots
- 4
- States
- 0
- Writer
- Shared
Preview
<Breadcrumb
items={[
{ href: "/view/shop/list", label: "Shops" },
{ href: "/view/shop/storefront/north-loop", label: "North Loop Ceramics" },
{ label: "Orders" }
]}
/>Change this declaration and watch it render:open Breadcrumb in the playground
Props
The inputs the shared writer reads. `data-*` and `aria-*` attributes pass through and are not listed.
| Prop | Type | Required | Default | Also written |
|---|---|---|---|---|
| id | text | Optional | — | — |
| items | json | Required | — | — |
Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .cre8-breadcrumb |
| list | — |
| item | — |
| current | — |
- Role
- navigation
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-navigation | ready |
| terminal | terminal-text | planned |
Accessibility
A labelled navigation landmark holding an ordered list of links.
- The nav carries aria-label="Breadcrumb", so it is distinct from the page's main navigation.
- The last item is the current page: aria-current="page" and never a link.
- Earlier items without an href render as plain text, not as dead links.