Breadcrumb

A breadcrumb shows where a page sits. It is a <nav> labelled Breadcrumb holding an ordered list, so the trail reads in order and the last item is the current page.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="./">Home</a></li>
    <li><a href="components/">Components</a></li>
    <li aria-current="page">Breadcrumb</li>
  </ol>
</nav>
A breadcrumb trail

A trail

The <ol> lays the steps in a row with a separator between them. Each step before the last is a link.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="./">Home</a></li>
    <li><a href="components/">Components</a></li>
    <li><a href="components/structure/">Structure</a></li>
    <li aria-current="page">Breadcrumb</li>
  </ol>
</nav>
A four-step trail ending on the current page

The current page

The last item drops the link and takes aria-current="page", so it reads as where you are.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="./">Home</a></li>
    <li aria-current="page">Here</li>
  </ol>
</nav>
The final step marks the current page