CSS

A breadcrumb is three parts: the bar (.tng-breadcrumb, a labelled <nav>), the trail (.tng-breadcrumb-list, an <ol>) and its items (.tng-breadcrumb-item). The bar paints the surface, bottom border and padding; the trail lays the items out in a row that wraps; every item except the current page ends in a tng-icon icon-chevron-right separator with aria-hidden="true". Parent pages are tng-link is-neutral links, the current page is a tng-text-body is-6 is-heavy span carrying aria-current="page", and the home link is an is-no-bg icon button in a .tng-breadcrumb-item.is-home. Links switch from the large to the medium link size, and the bar from 16px to 40px side padding, at 768px.

<nav class="tng-breadcrumb" aria-label="Breadcrumb">
  <ol class="tng-breadcrumb-list" role="list">
    <li class="tng-breadcrumb-item is-home">
      <a class="tng-icon-button is-no-bg" href="#" aria-label="Home">
        <i class="tng-icon"></i>
      </a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>

    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">All new vehicles</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>
    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">Hybrid</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>
    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">Yaris</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>

    <li class="tng-breadcrumb-item">
      <span class="tng-text-body is-6 is-heavy" aria-current="page">
        Yaris Hybrid 130 GR Sport
      </span>
    </li>
  </ol>
</nav>

Neutral
Contrast

role="list" keeps the list semantics Safari drops from a list without bullets. The home and ellipsis glyphs come from the stylesheet: leave their tng-icon empty and name the control with aria-label.

Elements

Trail without the bar

The trail and its items work on their own, so a breadcrumb can sit inside another surface, such as a hero, without the bar’s background, border and padding. Keep the <nav> and its label; drop the class.

<nav aria-label="Breadcrumb">
  <ol class="tng-breadcrumb-list" role="list">
    <li class="tng-breadcrumb-item is-home">
      <a class="tng-icon-button is-no-bg" href="#" aria-label="Home">
        <i class="tng-icon"></i>
      </a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>

    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">All new vehicles</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>
    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">Hybrid</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>
    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">Yaris</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>

    <li class="tng-breadcrumb-item">
      <span class="tng-text-body is-6 is-heavy" aria-current="page">
        Yaris Hybrid 130 GR Sport
      </span>
    </li>
  </ol>
</nav>

Long labels

Labels wrap rather than truncate. To keep a long label on one line, add tng-overflow-ellipsis to it and decide its maximum width yourself — the breadcrumb sets no width limit on its items.

States

Collapsed

Add .is-collapsed to the trail to shorten it. On desktop it keeps the home link, the ellipsis, the immediate parent and the current page; below 768px it keeps only the ellipsis and the current page. The ellipsis item (.tng-breadcrumb-item.is-ellipsis) shows only while the trail is collapsed — place it right after the home link. The trail must end with the current page, preceded by its immediate parent.

<nav class="tng-breadcrumb" aria-label="Breadcrumb">
  <ol class="tng-breadcrumb-list is-collapsed" role="list">
    <li class="tng-breadcrumb-item is-home">
      <a class="tng-icon-button is-no-bg" href="#" aria-label="Home">
        <i class="tng-icon"></i>
      </a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>

    <li class="tng-breadcrumb-item is-ellipsis">
      <button
        class="tng-icon-button is-no-bg"
        type="button"
        aria-expanded="false"
        aria-label="Show full path"
      >
        <i class="tng-icon"></i>
      </button>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>

    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">All new vehicles</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>
    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">Hybrid</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>
    <li class="tng-breadcrumb-item">
      <a class="tng-link is-neutral" href="#">Yaris</a>
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </li>

    <li class="tng-breadcrumb-item">
      <span class="tng-text-body is-6 is-heavy" aria-current="page">
        Yaris Hybrid 130 GR Sport
      </span>
    </li>
  </ol>
</nav>

Neutral
Contrast

Hidden items stay in the DOM with display: none, so their links leave the tab order until the trail expands. Deciding when to collapse is yours, as is expanding: remove .is-collapsed and set aria-expanded="true" when the ellipsis is activated (point its aria-controls at the list’s id), then move focus to the first link that appeared, because the ellipsis itself disappears. The recipe below shows one way to wire it.

Recipes

On a narrow viewport both trails start collapsed; on desktop the short one stays expanded and the deep one, which would wrap, collapses. Activate the ellipsis to expand a trail in place; press Escape or interact outside it to collapse it again.

source code