Breadcrumbs

Last updated:

Practical patterns for hierarchy trails that orient users without replacing navigation.

01 — Foundation

Breadcrumbs show where you are

They supplement navigation — they do not replace a clear information architecture.

Breadcrumbs expose hierarchy — Home → Products → Shoes. They help users orient and jump up levels. They fail when trails are wrong, current page is misleading, or crumbs are not real links. Compare markup with the GOV.UK breadcrumbs component — we use the same nav, ordered list, and aria-current="page" model on this site.

02 — Markup

Semantic breadcrumb trails

Use navigation with an ordered list — not a string of spans.

  • nav with aria-label="Breadcrumb" (or clearer context)
  • ordered list of items; ancestors are links, current page is text or link with aria-current="page"
  • separators visible to sighted users — CSS or text — without breaking list semantics 
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/products/">Products</a></li>
        <li aria-current="page">Running shoes</li>
    </ol>
</nav>

03 — Content

Honest labels and mobile

Each crumb should match the page title users expect.

  • match real hierarchy — do not invent intermediate levels
  • truncate long labels on small screens without removing accessible names
  • do not rely on breadcrumbs as the only way to navigate — see Navigation

04 — Review

Before you approve

A short checklist for breadcrumbs in code review.

  • semantic nav + ol; current page marked
  • ancestors link correctly; labels match the site structure
  • keyboard and screen reader users can traverse the trail