4.2.1 Breadcrumbs

Toggle example guides Toggle HTML markup

Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content. They are hidden on mobile screens.

Example
Markup: 03-molecules/navigation/breadcrumb/breadcrumb.twig 
<nav role="navigation" class="breadcrumbs">
  <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
  <ol class="breadcrumb container">
    <li>
      <a href="#">Home</a>
      <svg class="icon-gray icon-small">
        <use xlink:href="#icon-navigate_next"></use>
      </svg>
    </li>
    <li>
      <a href="#">Overview</a>
      <svg class="icon-gray icon-small">
        <use xlink:href="#icon-navigate_next"></use>
      </svg>
    </li>
    <li class="active"> Detail page</li>
  </ol>
</nav>
Source: 03-molecules/navigation/breadcrumb/breadcrumb.scss, line 3