Breadcrumb

Where this page sits, and a way back up.

When to use

On content pages inside a hierarchy: a guide, a department page, a service's information pages.

When not to use

Inside a form journey. People should move with Continue and Back, not jump out to a parent page and lose their place.

<nav aria-label="Breadcrumb">
  <ol class="ag-breadcrumb ag-mb-0">
    <li><a href="#breadcrumb-example">Home</a></li>
    <li><a href="#breadcrumb-example">Services</a></li>
    <li><a href="#breadcrumb-example">Passports</a></li>
    <li><span aria-current="page">Renew a passport</span></li>
  </ol>
</nav>

Accessibility

• An ordered list inside nav aria-label="Breadcrumb", so it is a landmark and the order is announced.
• The current page is text, not a link, with aria-current="page".
• The separators are drawn with CSS, so screen readers do not read "greater than" between every item.