## Breadcrumb
A trail of ancestor links ending in the current page — and, at size=page-title, the page heading itself (there is no separate page-title component).
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-breadcrumb> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, admin, settings.
Props:
- items: JSON [{label, href?, icon?, disabled?}], default []. The trail; an entry with href is a link, the last / href-less entry is the current page, icon adds a leading DS glyph, disabled mutes it
- size: 'default' | 'mini' | 'page-title', default default. Scale of the trail. default 13/22 · mini 12/18 for sub-page nav; page-title renders the current crumb as the page heading (24/600 alone, 18/600 in a trail)
- heading-level: 1 | 2 | 3 | 4 | 5 | 6, default 1. Heading tag used for the current crumb when size=page-title — an <h1> page title by default; drop to h2–h6 if the breadcrumb isn't the page's top heading
- separator: 'caret' | 'slash', default caret. Divider glyph between crumbs — the DS caret (default) or a slash
- maxItems: number, default 0. Collapse the middle into an ellipsis toggle when the trail is longer than N (0 = never)
- navigate: CustomEvent, default —. Composed event on a link click, detail { index, href }
Tokens: text-secondary, text-default, text-disabled, color-primary, icon-muted, bg-hover, border-focus, radius-xs.
Use when: Breadcrumb (page-title) (the heading of a product page — size=page-title makes the current crumb the page <h1>, alone or at the end of its ancestor path. This is THE page title; do not hand-roll a plain <h1>/heading); Breadcrumb (default / mini) (showing where a page sits in a hierarchy the user can climb back up, without heading-level prominence); Screen heading (the page header ROW — a page title (via this breadcrumb) plus right-aligned action buttons); Tabs (switching between sibling views at the same level — not a hierarchy); Back button (a single linear step back is all that's needed).