Breadcrumb

Usage #

Breadcrumb navigation is displayed using the breadcrumb class.

<nav class="breadcrumb">
    <ul class="breadcrumb-list">
        <li class="breadcrumb-item">
            <a href="#" class="breadcrumb-link">...</a>
        </li>
        <li class="breadcrumb-item active">
            <a href="#" class="breadcrumb-link">...</a>
        </li>
    </ul>
</nav>

By default, breadcrumb items are separated by a forward slash (/). The breadcrumb module also has two modifiers that change the separator symbol.

• breadcrumb-path
• breadcrumb-bullet

<nav class="breadcrumb breadcrumb-path">...</nav>
<nav class="breadcrumb breadcrumb-bullet">...</nav>

Separator #

You can add your own symbol to separate items in the breadcrumb navigation. See details on how to customize the framework.

.breadcrumb-vert {
    --breadcrumb-separator: '07C';
}

If you add the created breadcrumb-vert modifier to the module classes, you will see a new separator symbol.

<nav class="breadcrumb breadcrumb-vert">...</nav>

Scales #

You can add your own size or change an existing one by creating a modifier and specifying new breadcrumb parameters in your custom SCSS.

.breadcrumb-large {
    --breadcrumb-font-size: var(--type-scale-20);
}

Now you have a new breadcrumb-large size modifier.

<nav class="breadcrumb breadcrumb-large">...</nav>

Colors #

For the breadcrumb module, you can override default colors. You can do this in your custom SCSS. See also how to customize the framework.

.breadcrumb {
    --breadcrumb-link-color: var(--palette-active-dark);
    --breadcrumb-link-hover-color: var(--palette-negative-dark);
    --breadcrumb-link-active-color: var(--palette-black);
    --breadcrumb-separator-color: var(--palette-negative-base);
}

The result will be the breadcrumb with changed colors without modifiers.

<nav class="breadcrumb">...</nav>

Variants #

Variants help you change the different properties of a module. For example, the spacing between menu items, padding, and so on. This can be done by changing module variables. See also how to customize the framework.

In the example below we change the separator symbol and the default breadcrumb spacing.

.breadcrumb {
    --breacrumb-item-space: 1rem;
    --breadcrumb-separator: '07C';
}

If you apply the variants above, the breadcrumb will have a smaller spacing between items and a different separator than the default.

<nav class="breadcrumb">
    <ul class="breadcrumb-list">
        <li class="breadcrumb-item">
            <a href="#" class="breadcrumb-link">...</a>
        </li>
        <li class="breadcrumb-item active">
            <a href="#" class="breadcrumb-link">...</a>
        </li>
    </ul>
</nav>

Color variant

You can create your own variant of the breadcrumb appearance by adding a new modifier to your custom SCSS. See also how to customize the framework.

.breadcrumb-active {
    --breadcrumb-link-color: var(--palette-active-dark);
    --breadcrumb-link-hover-color: var(--palette-negative-dark);

    .breadcrumb-link {
        text-decoration: underline;
    }
}

As a result, with the breadcrumb-active modifier the breadcrumb will look different from the default one.

<nav class="breadcrumb breadcrumb-active">
    <ul class="breadcrumb-list">
        <li class="breadcrumb-item">
            <a href="#" class="breadcrumb-link">...</a>
        </li>
        <li class="breadcrumb-item active">
            <a href="#" class="breadcrumb-link">...</a>
        </li>
    </ul>
</nav>

Variables #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.

// colors
--breadcrumb-link-color: var(--palette-black);
--breadcrumb-link-hover-color: var(--palette-black-60);
--breadcrumb-link-active-color: var(--palette-black-40);

// vars
--breadcrumb-font-size: var(--type-scale-14);
--breadcrumb-line-height: var(--body-text-line);
--breadcrumb-item-space: 2rem;
--breadcrumb-separator: '002f';
--breadcrumb-separator-color: var(--palette-black-25);