Breadcrumb
Basic implementation
Import
Import the settings, the link and the breadcrumb scss files.
@import 'settings-tools/all-settings';@import 'components/c.links';@import 'components/c.breadcrumb';
Usage
The creation of a Breadcrumb component in your code is done using the following HTML structure:
<nav class="mc-breadcrumb" aria-label="Breadcrumb"> <ul class="mc-breadcrumb__container"> <li class="mc-breadcrumb__item"> <a href="#" class="mc-link mc-link--s"> Level 00 </a> </li> <li class="mc-breadcrumb__item"> <span class="mc-link mc-link--s 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.
The links in the breadcrumb trail are Mozaic Links components in size S.
In order to guarantee the harmony of your page, please always use the S size of the mc-link component when it is used in a Breadcrumb component.
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.
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-link--s 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 mc-link--s"> Level 00 </a> </li> <li class="mc-breadcrumb__item"> <a href="#" class="mc-link mc-link--s"> Level 01 </a> </li> <li class="mc-breadcrumb__item is-active"> <span class="mc-link mc-link--s mc-breadcrumb__current"> Level 02 </span> </li> </ul></nav>
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.