Example

This is how a generic page is structured

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Product Page

This is how a product page is structured due to their enormous product names

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Residential</a></li>
    <li class="breadcrumb-item"><a href="#">Furnace</a></li>
    <li class="breadcrumb-item"><a href="#">Gas Furnace</a></li>
    <li class="breadcrumb-item active sr-only" aria-current="page">DLSC Series, Downflow Gas Furnace, 99% AFUE, 88,000 Btuh, Variable Speed, Modulating, 4-5 Ton, SLP99DF090XV60C</li>
  </ol>
</nav>

Deeply Nested

For deeply nested pages (greater than 4 or 5 sub links) the first and last two will be shown, with the others being truncated. The below is just an example and not representative of our category structure.

The breadcrumbs will automatically truncate with greater than 5 items. In total it will show 4 breadcrumb items, plus an ellipses, to total 5. 

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Residential</a></li>
    <li class="breadcrumb-item"><a href="#">Heating</a></li>
    <li class="breadcrumb-item"><a href="#">Furnace</a></li>
    <li class="breadcrumb-item"><a href="#">Gas</a></li>
    <li class="breadcrumb-item active" aria-current="page">Product ABC XYZ</li>
  </ol>
</nav>

Accessibility

Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `nav` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.

For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).