Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Example#

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#">
                <svg class="icon icon-2" xmlns="http://www.w3.org/2000/svg" role="img"
                    focusable="false">
                    <title>Home</title>
                    <use xlink:href="../../.././_assets/images/icon__sprite.svg#house">
                    </use>
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Breadcrumb level #1</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Breadcrumb level #2</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Breadcrumb level #3</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Breadcrumb level #4</a>
        </li>
    </ol>
</nav>

Changing the separator#

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider.

Use a base64 embedded SVG icon:

$breadcrumb-divider: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBhdGggZD0iTTI0LjYgMGwtNS4yIDMgMTUuMiAyNy0xNS4yIDI3IDUuMiAzIDE2LTI4LjV2LTN6Ii8+PC9zdmc+");

It's also possible to use a URI embedded SVG icon:

$breadcrumb-divider: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 16' xml:space='preserve' fill='%23353b42'%3E%3Cpath d='M.8 16h.1V3.1H.2C.2 3 .1 3 .1 3V15.8h.7z'/%3E%3C/svg%3E");

Another option is to use the function svg-load to load a svg file, which will be placed inline into the css at comilation of the scss:

$breadcrumb-divider: svg-load('path/to/icon.svg', fill=#000);

You can read more about it in the PostCSS plugin itself: https://github.com/TrySound/postcss-inline-svg

The separator can be removed by setting $breadcrumb-divider to none:

$breadcrumb-divider: none;

Accessibility#

Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.

Change log#

6.4.1 - 2021-11-29#

Changed#

• Assets: "Breadcrumb" | updated SCSS-only icon ./icons/_scssOnly/pipe.svg to match pipe of design specification and remove messy corners

6.4.0 - 2021-10-28#

Added#

• Assets: "Breadcrumb" | added new SCSS-only icon ./icons/_scssOnly/pipe.svg
• SCSS: "Breadcrumb" | added general $icon-discrepancy variable to _variables-theme.scss
• SCSS: "Breadcrumb" | added new variables $breadcrumb-item-margin-y, $breadcrumb-icon-color, $breadcrumb-link-hover-active-color, $breadcrumb-divider-width to _variables-theme.scss

Changed#

• SCSS: "Breadcrumb" | updated styling of breadcrumb to match new styleguide specification
• SCSS: "Breadcrumb" | updated $breadcrumb-divider in _variables-root.scss

Removed#

• HTML: "Breadcrumb" | Remove active item from breadcrumb
• SCSS: "Breadcrumb" | removed $breadcrumb-active-color in _variables-root.scss

5.0.0 - 2021-01-28#

Changed#

• SCSS: "Breadcrumb" | added new variable $breadcrumb-icon-margin-top
• HTML: "Breadcrumb" | removed icon-sizing from css and use icon utility-class .icon-2 for icon