Breadcrumbs

An <ol> inside a <nav> is a breadcrumb trail. The last item is the page itself, marked with aria-current="page" and not linked.

Basic

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/guide">Guide</a></li>
    <li><a href="/guide/templates">Templates</a></li>
    <li aria-current="page">Layouts</li>
  </ol>
</nav>

The separators are drawn by CSS, so there is nothing between the list items to read aloud.

Notes

• aria-label="Breadcrumb" on the <nav> is what tells a screen reader which navigation this is.
• The current item takes the full ink; the rest take --s72-fg-2.
• The trail wraps onto a second line rather than scrolling, so a deep path stays readable on a phone.