Breadcrumb
Horizontal breadcrumb trail. Pass an array of React nodes and the component inserts / separators between them.
Component behavior
Breadcrumb displays a hierarchy path. Provide navigable destinations for segments before the current page.
- Hierarchy paths whose ancestors are navigable destinations.
- Hierarchy navigation within a TopBar.
- Short paths that fit the available width; breadcrumbs do not wrap or truncate.
Props
items is an array of already-rendered nodes. The component walks it, inserts a / span before every entry after the first, and renders each node verbatim: it does not wrap segments in links, mark the last one as current, or shorten anything. The styling it applies is inherited: the trail is dim by default and any <b> inside it is promoted to full-strength foreground at medium weight, which makes the final segment the emphasized end of the path.
| Prop | Type | Default | Description |
|---|---|---|---|
items | ReactNode[] | — | Segments in order, outermost ancestor first, current page last. Each node renders as-is; the / separators are inserted between them. |
Examples
A trail
The standard pattern: anchors for the ancestors and a <b> for the current page. The stylesheet keys off the <b> tag to lift the last segment out of the dim treatment applied to the rest of the trail.
Named landmark and current page
Pass role and aria-label to label the wrapper. Set aria-current="page" on the current destination. These attributes are not applied automatically.
Collapsing a deep path
Breadcrumb uses one non-wrapping flex row and does not collapse overflow. For deep paths, shorten the items array or replace middle segments with an expandable ellipsis.
import { Breadcrumb } from "@solarius/onset";