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 extend modules.

.breadcrumb-vert {
    .breadcrumb-item:after {
        content: '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 #

By default, breadcrumb has only one font size scale. This can be changed by extending the type scale for this module. See also how to work with text size scales for modules.

// =Scales
$scales: map-extend($scales, (
    type: (
        breadcrumb: (
            large: 21px
        )
    )
));

In this case, Superkube will automatically generate the breadcrumb-large text size modifier.

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

Colors #

For the breadcrumb module, you can override default colors. Simply extend the $colors map with the new default values. See also how to work with colors for modules.

// =Colors
$colors: map-extend($colors, (
    breadcrumb: (
        default: (
            item: (
                after: (
                    color: palette(negative, base)
                ),
                active: (
                    link: (
                        color: palette(black)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(active, dark)
                ),
                hover: (
                    color: palette(negative, dark)
                )
            )
        )
    )
));

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 extending the $variants map and setting new values in it. See also how to work with variants of modules.

In the example below we change the separator symbol by extending module and the default breadcrumb params.

// =Modules
.breadcrumb-default {
    .breadcrumb-item:after {
        content: '07C';
    }
}

// =Variants
$variants: map-extend($variants, (
    breadcrumb: (
        default: (
            item: (
                after: (
                    margin-left: 1rem,
                    margin-right: 1rem
                )
            )
        )
    )
));

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 extending the $colors map with a new modifier. See also how to work with colors for modules.

// =Colors
$colors: map-extend($colors, (
    breadcrumb: (
        active: (
            link: (
                base: (
                    color: palette(active, dark)
                ),
                hover: (
                    color: palette(negative, dark)
                )
            )
        )
    )
));

The colors for this variant will be generated automatically. If you want, you can extend the module and add some other properties with SCSS. See also how to extend modules.

.breadcrumb-active {
    .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 SCSS variables. This is here for clarity and to simplify modification and overriding of values

// =Type
$scales: (
    type: (
        breadcrumb: (
            default: 14px 1.5
        )
    )
);

// =Colors
$colors: (
    breadcrumb: (
        default: (
            item: (
                after: (
                    color: palette(black-o, 25)
                ),
                active: (
                    link: (
                        color: palette(black-o, 40)
                    )
                )
            ),
            link: (
                base: (
                    color: palette(black)
                ),
                hover: (
                    color: palette(black-o, 60)
                )
            )
        )
    )
);

// =Variants
$variants: (
    breadcrumb: (
        default: (
            item: (
                after: (
                    margin-left: 2rem,
                    margin-right: 2rem
                )
            )
        )
    )
);