Mozaic

Basic implementation

Import

Import the settings, the link and the breadcrumb scss files.

@import 'settings-tools/_all-settings';

@include import-font-families();

@import 'components/_c.links';

@import 'components/_c.breadcrumb';

Usage

You can create breadcrumbs in the following way:

Use the mc-breadcrumb class on an HTML element <nav> as a wrapper
Apply the mc-breadcrumb__container class to the <ul> container of your breadcrumb
The <li> elements must have the class mc-breadcrumb__item
Each link must have the class mc-link
In addition to the mc-link class, add the class mc-breadcrumb__current on the last level link

<nav class="mc-breadcrumb" aria-label="Breadcrumb">
  <ul class="mc-breadcrumb__container">
    <li class="mc-breadcrumb__item">
      <a href="#" class="mc-link">
        Level 00
      </a>
    </li>
    <li class="mc-breadcrumb__item">
      <span class="mc-link mc-breadcrumb__current">
        Level 01
      </span>
    </li>
  </ul>
</nav>

Note that for all behaviors related to breadcrumb links, please refer to the Links pattern documentation.

Viewport: px

<div class="example">
  <nav class="mc-breadcrumb" aria-label="Breadcrumb">
    <ul class="mc-breadcrumb__container">
      <li class="mc-breadcrumb__item">
        <a href="#" class="mc-link">
          Level 00
        </a>
      </li>
      <li class="mc-breadcrumb__item">
        <a href="#" class="mc-link">
          Level 01
        </a>
      </li>
      <li class="mc-breadcrumb__item">
        <span class="mc-link mc-breadcrumb__current" aria-current="page">
          Level 02
        </span>
      </li>
    </ul>
  </nav>
</div>

Variations

Color themes

The breadcrumb is available in two colour variations.

You can use these variations by applying the following modifiers:

Light mode: this is the default variation so you don't need to add a modifier
Dark mode: use the mc-breadcrumb--dark modifier

About the dark mode

In addition to the mc-breadcrumb--dark modifier to use on the wrapper, you must also use the mc-link--light modifier on the links.

You can learn more about how this works in the Links pattern documentation.

Viewport: px

<div class="example">
  <nav class="mc-breadcrumb mc-breadcrumb--dark" aria-label="Breadcrumb">
    <ul class="mc-breadcrumb__container">
      <li class="mc-breadcrumb__item">
        <a href="#" class="mc-link mc-link--light">
          Level 00
        </a>
      </li>
      <li class="mc-breadcrumb__item">
        <a href="#" class="mc-link mc-link--light">
          Level 01
        </a>
      </li>
      <li class="mc-breadcrumb__item">
        <a href="#" class="mc-link mc-link--light">
          Level 02
        </a>
      </li>
      <li class="mc-breadcrumb__item">
        <span
          class="mc-link mc-link--light mc-breadcrumb__current"
          aria-current="page"
        >
          Level 03
        </span>
      </li>
    </ul>
  </nav>
</div>

Behaviours

Smaller breakpoints

As explained on the main page, the breadcrumb can't be displayed entirely on lower resolutions.

That's why you must make sure to display only the previous level link of the current page on these resolutions.

<nav class="mc-breadcrumb" aria-label="Breadcrumb">
  <ul class="mc-breadcrumb__container">
    <li class="mc-breadcrumb__item">
      <a href="#" class="mc-link mc-breadcrumb__current">
        Level
      </a>
    </li>
  </ul>
</nav>

If you don't have the possibility to perform tests allowing you to display only the previous level link of the current page, we provide you with a way to achieve the desired functioning in pure HTML & CSS:

Add the mc-breadcrumb--responsive modifier to the wrapper
Add the is-active class on the last <li> level

<nav class="mc-breadcrumb mc-breadcrumb--responsive" aria-label="Breadcrumb">
  <ul class="mc-breadcrumb__container">
    <li class="mc-breadcrumb__item">
      <a href="#" class="mc-link">
        Level 00
      </a>
    </li>
    <li class="mc-breadcrumb__item">
      <a href="#" class="mc-link">
        Level 01
      </a>
    </li>
    <li class="mc-breadcrumb__item is-active">
      <span class="mc-link mc-breadcrumb__current">
        Level 02
      </span>
    </li>
  </ul>
</nav>

Viewport: px

<div class="example">
  <nav class="mc-breadcrumb mc-breadcrumb--responsive" aria-label="Breadcrumb">
    <ul class="mc-breadcrumb__container">
      <li class="mc-breadcrumb__item">
        <a href="#" class="mc-link">
          Level 00
        </a>
      </li>
      <li class="mc-breadcrumb__item">
        <a href="#" class="mc-link">
          Here is the level 01 link
        </a>
      </li>
      <li class="mc-breadcrumb__item is-active">
        <a href="#" class="mc-link">
          This is another very long level (Level 02) link
        </a>
      </li>
      <li class="mc-breadcrumb__item">
        <a href="#" class="mc-link">
          The third level of link is here
        </a>
      </li>
      <li class="mc-breadcrumb__item">
        <span class="mc-link mc-breadcrumb__current" aria-current="page">
          This is the Last Level link
        </span>
      </li>
    </ul>
  </nav>
</div>

Semantic

The breadcrumb being a navigation element, we recommend you use a nav tag as its global wrapper.

An HTML structure with ul and li elements is recommended inside your global wrapper.