# Breadcrumb
> Generated from breadcrumb.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, admin, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `items` | JSON [{label, href?, icon?, disabled?}] | `[]` | 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` | 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 | `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' | `caret` | Divider glyph between crumbs — the DS caret (default) or a slash |
| `maxItems` | number | `0` | Collapse the middle into an ellipsis toggle when the trail is longer than N (0 = never) |
| `navigate` | CustomEvent | `—` | Composed event on a link click, detail { index, href } |

## Visual standard (measured)
- Type: Plus Jakarta — default 13/22, mini 12/18, page-title 18/1.3 (solo title 24/1.3)
- Link: text-secondary #4A4A4A → hover color-primary #6A1EBB (motion-fast + ease-out)
- Current: text-default #1A1A1A, SemiBold 600, aria-current=page (stronger than links)
- Page title: size=page-title → current crumb is a real heading (<h1>, heading-level picks h1–h6); whole trail SemiBold 600; standalone (1 item) = Heading4 24/600/ls 0, in a trail = 18/1.3/ls 0.2
- Item icon: optional leading <aha-icon>, currentColor — 12 mini / 14 default / 16 page-title
- Disabled: text-disabled #B5B5B5, not a link (aria-disabled)
- Separator: caret (<aha-icon name="system-caret-right">, icon-muted, 12 · 16 at page-title) or slash "/"
- Collapse: maxItems > trail → first + ellipsis toggle + trailing (maxItems−1)
- Gap: 8 between crumbs (4 at mini), 6 icon→label

## When to use
- **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

The page title is NOT a plain <h1> — it is <aha-breadcrumb size="page-title">, with just the current page as the only item (or the full ancestor path in front of it). A hand-rolled heading is the wrong answer: it drifts from the DS type scale and loses the built-in trail, aria-current, and navigate event. Keep breadcrumbs to the real ancestor path — don't pad them. The last item is the current page and is never a link. Labels are short nouns, sentence case.