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

: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.

<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.