Breadcrumb

Basic implementation

Import

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

Usage

The creation of a Breadcrumb component in your code is done using the following HTML structure:

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

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.

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

Semantic