Breadcrumb

A breadcrumb navigation provide links back to each previous page the user navigated through, and shows the user’s current location in a website.

The following code examples shows how to use breadcrumb:

<nav class="breadcrumb">
  <ul class="breadcrumb__list">
    <li class="breadcrumb__item">
      <span class="breadcrumb__separator">
        <span class="icon icon--arrow-double-right"></span>
      </span>
      <a class="breadcrumb__text" href="#">Item 01</a>
    </li>

    <li class="breadcrumb__item">
      <span class="breadcrumb__separator">
        <span class="icon icon--arrow-double-right"></span>
      </span>
      <a class="breadcrumb__text" href="#">Item 02</a>
    </li>

    <!-- ... -->
  </ul>
</nav>

The following list describe all existing block/element/modifier classes of the component and all data attributes.

• .breadcrumb - required the block that represent the breadcrumb component and contains all elements, should be a <nav>
• .breadcrumb__list - required a list of breadcrumb items, should be a <ul>
• .breadcrumb__item - required a single breadcrumb item, with text and separator, should be a <li>
• .breadcrumb__separator - required an element that separate this item from the one before
• .breadcrumb__text - required this element contains a inline element, mostly text, that represent the menu navigation

Basic Example: