Breadcrumbs

Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page.

According to the A11Y Style Guide, breadcrumbs should be placed inside a <nav> tag whenever possible. The markup should include an aria-label="breadcrumbs" to describe the type of navigation, and you should add aria-current="page" to the link that points to the current page.

Breadcrumb Structure

In addition to using a <nav> tag with breadcrumbs, we also create these lists with an ordered list (<ol>) as is appropriate.

<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ol>
    <li><a href="#!">Home</a></li>
    <li><a href="#!">Category</a></li>
    <li><a href="#!">Sub-Category</a></li>
    <li aria-current="page">Product</li>
  </ol>
</nav>