Breadcrumbs

A breadcrumb trail shows where a page sits in the site hierarchy and gives readers a way back up. This page’s own trail, directly above, is a live instance.

Example

Live example — three-level trail

<nav class="pds-breadcrumbs" aria-label="Breadcrumb">
  <ol class="pds-breadcrumbs__list">
    <li class="pds-breadcrumbs__item"><a href="/">Home</a></li>
    <li class="pds-breadcrumbs__item"><a href="/components/">Components</a></li>
    <li class="pds-breadcrumbs__item"><span aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>

Anatomy

Landmark — a <nav> labelled aria-label="Breadcrumb" so it can be found among other navigation landmarks.
Ordered list — the trail is an <ol>: position in the hierarchy is part of the meaning.
Separators — the “›” is generated content, decorative, and hidden from assistive technology.
Current page — plain text (not a link) marked aria-current="page".

Rules

Show the full hierarchy from the home page to the current page, one level per item.

Use breadcrumbs on pages three or more levels deep.

Don’t

Don’t link the current page to itself, and don’t use breadcrumbs as a substitute for primary navigation.

Accessibility notes

Link text is the section name — identical to the heading of the page it leads to.
Trails wrap on small screens and never truncate the current page name.