Pattern Library

Breadcrumbs

Simple breadcrumbs.

Sass Mixin

@mixin breadcrumbs()

Parameters

None.

Emmet Shorthand

nav.breadcrumbs>ul>li>a+li.active>a
<nav class=" breadcrumbs">
    <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="">
                Item 1
                <svg class="link__icon -separator" viewBox="0 0 24 24" stroke="currentColor" fill="none">
                    <polyline points="9 6 15 12 9 18" />
                </svg>
            </a>
        </li>
        <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="">
                Item 2
                <svg class="link__icon -separator" viewBox="0 0 24 24" stroke="currentColor" fill="none">
                    <polyline points="9 6 15 12 9 18" />
                </svg>
            </a>
        </li>
        <li class="breadcrumbs__item -active">
            <a class="breadcrumbs__link" href="">
                Item 3
            </a>
        </li>
    </ol>
</nav>
  • Content: 
    ///
/// Simple breadcrumbs for your breadcrumbing needs.
///
/// $color
///     crumb color
/// $hover-color
///     crumb hover color
///
@mixin breadcrumbs(
    $color: $meta-text,
    $hover-color: $link-hover,
) {
    $b: &;

    &__list {
        display: flex;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    &__item {
        margin-bottom: 0;
    }

    &__link {
        color: $color;
        display: block;
        padding: $thin-v-space #{divide($thin-h-space, 2)};
        transition: color $fade-easing $fast;

        #{$b}__item:first-child & {
            margin-left: -#{divide($thin-h-space, 2)};
        }

        &:hover {
            color: $hover-color;
        }
    }
}

.breadcrumbs {
    @include breadcrumbs;
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: resources/styles/atoms/breadcrumbs/breadcrumbs.scss
  • Size: 774 Bytes