<!-- Design Lounge Nº 180 · "Breadcrumb" · www.designlounge.live -->

# Breadcrumb

> **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. When a kit is locked, the type and colours come from the theme. Do not turn the crumbs into pills.

## What it is

A path above the page title. Dispatch, then Asar, then Gate 4. Gate 4 is the current page: ink, weight 500, not a link. The earlier crumbs are `--ink-2` links. A 12px chevron sits between them. The title under the path repeats Gate 4 at 40px. Clicking Dispatch or Asar does not leave the frame. It writes "Opened Dispatch." or "Opened Asar." This is the path, not the sidebar. A record page that already includes a path is `record-detail-header`. Use this piece when the path is the thing you are building.

## Reference behaviour

1. The trail is Dispatch / Asar / Gate 4. Only Gate 4 has `aria-current="page"`.
2. The title is Gate 4.
3. Clicking Dispatch writes "Opened Dispatch." Clicking Asar writes "Opened Asar."
4. Gate 4 is not a link. Clicking it does nothing.
5. Focus ring is 2px `--focus`, offset 3px, on the links.
6. There is no animation and no dropdown on a crumb.

## Structure

```
padding 48px 64px
Dispatch  >  Asar  >  Gate 4     row min-height 40
Gate 4                           40px title
status                           empty until a click
```

- `nav` with `aria-label="Breadcrumb"`.
- An `ol`. Each crumb is an `li`. Separators are inline SVG, `aria-hidden`, not a character the screen reader speaks as a word if you can avoid it. The chevron is hidden. The list structure is the path.
- Current page is a `span`, not an `a`.

## Tokens

```css
:root {
  --bg: #f6f4ef;
  --ink: #161513;
  --ink-2: #5a554c;
  --focus: #1f4d3a;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}
```

No radius. Crumbs are text. A locked family's radius does not wrap each crumb in a chip.

## Typography

| Role | Family | Size | Weight | Colour |
| --- | --- | --- | --- | --- |
| Link | sans | 14px | 400 | `--ink-2` |
| Current | sans | 14px | 500 | `--ink` |
| Title | sans | 40px | 500 | `--ink` |
| Status | sans | 14px | 400 | `--ink-2` |

Title letter-spacing is -0.02em in this demo. When a pairing is locked, the title uses that pairing's display tracking, not this number.

## Motion

None. Reduced motion has nothing to remove. Do not slide the trail in.

| Thing | Trigger | What changes |
| --- | --- | --- |
| Link click | prevent navigation | status sentence |
| Hover | link | colour becomes `--ink` |
| Focus | keyboard | ring, offset 3px |

## States

- Link resting: `--ink-2`, no underline.
- Link hover: `--ink`.
- Current: `--ink`, weight 500, not underlined, not a button.
- Chevron: 12px, stroke 1.75, `currentColor` of `--ink-2`.
- Title: 40px, weight 500, margin-top 8px.
- Focus-visible: 2px outline, offset 3px.
- Do not give the current crumb a soft background. It is the page name.

## Accessibility

- The nav label is Breadcrumb.
- `aria-current="page"` is on the current crumb only.
- Separators are `aria-hidden="true"`.
- Links are real anchors. In the demo, preventDefault keeps the iframe in place. In a product they are real routes.
- Hit target: each crumb's line is at least 40px tall.
- Contrast: `#5a554c` and `#161513` on `#f6f4ef` clear 4.5.
- The title repeats the current crumb so the page has one h1. Do not also make the crumb an h1.

## Responsive rules

- At 1280 the trail is one line, padding 48px 64px.
- Below 640 the trail may wrap. Do not drop the middle crumb. If a product path is long, collapse the middle into one menu. This demo has three crumbs and does not collapse.
- The title may step down to 32px below 640. It stays the largest type on the view.

## Acceptance checklist

- [ ] The trail reads Dispatch, Asar, Gate 4.
- [ ] Gate 4 is not a link and has `aria-current="page"`.
- [ ] Chevrons are 12px and hidden from assistive tech.
- [ ] The h1 is Gate 4 at 40px.
- [ ] Clicking Dispatch writes "Opened Dispatch."
- [ ] Clicking Asar writes "Opened Asar."
- [ ] Links are `#5a554c`. The current crumb is `#161513` weight 500.
- [ ] Focus ring is 2px, offset 3px.
- [ ] Crumbs are not pills and not a select.
- [ ] The click does not navigate the frame away.

## Implementation notes

Keep the separator out of the accessible name.

```html
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="#dispatch">Dispatch</a></li>
    <li><span aria-current="page">Gate 4</span></li>
  </ol>
</nav>
```

The demo has three crumbs. The middle one follows the same link pattern as Dispatch.

Common mistakes:

- Every crumb a link, including the current page.
- A slash character that is read aloud between every word, with no list.
- Pill crumbs.
- Replacing the trail with a back button only, on a web page that has a real path. A phone screen may use one back control. This piece is the web path.
- A dropdown mega menu on Asar. That is `editorial-mega-menu`.
- Making the crumb the only h1 and also a 14px link.
- Navigating the demo iframe to a dead route.

Where it sits in a product:

1. Put it at the top of a page that lives under a parent: a record, a gate, an article.
2. `record-detail-header` already has a path on a record. Do not stack a second trail under it.
3. The current crumb matches the h1.
4. Parents are links. The current page is text.
5. Three crumbs is this demo. A product uses the real parents. Do not invent a fourth level to look deep.
6. Colour comes from the theme. Links may use `--ink-2`. Do not use the brand red as the crumb colour.
7. Radius does not apply.
8. The status line is the demo's proof that the link fired. A product navigates.
9. Do not combine this with a pagination control in the same line.
10. Keep the credit line on the token block.

Rebuild order:

1. Set the paper and IBM Plex Sans.
2. Place the nav, the list, two links, the chevrons, and the current crumb.
3. Place the h1.
4. Prevent the link default and write the status sentence.
5. Check the current crumb is not tabbed as a link.
6. Check the chevron is hidden.

Copy you keep:

1. Dispatch.
2. Asar.
3. Gate 4.
4. Opened Dispatch. Opened Asar.

---

*From Design Lounge (https://www.designlounge.live). Live demo and source: /p/breadcrumb. Free to use in your products. Credit line: Designed using Design Lounge.*