Breadcrumbs

HTML

Show a path

Basic

HTML
    <nav class="breadcrumbs">
  <ul>
    <li>
      <a class="is-active">
        <span class="icon-integrations"></span>
        First
      </a>
    </li>
    <li>
      <a>
        Second
      </a>
    </li>
    <li>
      <a>
        Third
      </a>
    </li>
    <li>
      <a>
        Fourth
      </a>
    </li>
  </ul>
</nav>
  

With a back button

HTML
    <nav class="breadcrumbs">
  <a href="/" class="breadcrumbs__button is-active">
    Back
  </a>

  <ul>
    <li>
      <a class="is-active">
        <span class="icon-integrations"></span>
        First
      </a>
    </li>
    <li>
      <a>
        Second
      </a>
    </li>
    <li>
      <a>
        Third
      </a>
    </li>
    <li>
      <a>
        Fourth
      </a>
    </li>
  </ul>
</nav>
  

Full width

HTML
    <nav class="breadcrumbs breadcrumbs--full">
  <ul>
    <li>
      <a class="is-active">
        <span class="icon-integrations"></span>
        First
      </a>
    </li>
    <li>
      <a>
        Second
      </a>
    </li>
    <li>
      <a>
        Third
      </a>
    </li>
    <li>
      <a>
        Fourth
      </a>
    </li>
  </ul>
</nav>
  

Steps

HTML
    <nav class="breadcrumbs breadcrumbs--full">
  <ul>
    <li>
      <a class="is-active">
        <span class="icon-integrations"></span>
        First
      </a>
    </li>
    <li>
      <a class="is-active">
        Second
      </a>
    </li>
    <li>
      <a>
        Third
      </a>
    </li>
    <li>
      <a>
        Fourth
      </a>
    </li>
  </ul>
</nav>
  

Colors

HTML
    <nav class="breadcrumbs breadcrumbs--color-{color}">
  <ul>
    <li>
      <a class="is-active">
        <span class="icon-integrations"></span>
        First
      </a>
    </li>
    <li>
      <a class="is-active">
        Second
      </a>
    </li>
    <li>
      <a>
        Third
      </a>
    </li>
    <li>
      <a>
        Fourth
      </a>
    </li>
  </ul>
</nav>
  

Usage

Attribute Description Possible values Type Required Default
size Set with .breadcrumbs--{size} full. String - -
color Set with .breadcrumbs--color-{color} class See Colors page String - -