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 breadcrumbs__linkSeparator" 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 breadcrumbs__linkSeparator" 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:
    @use "sass:math";
    @use "/resources/styles/config";
    
    ///
    /// Simple breadcrumbs for your breadcrumbing needs.
    ///
    .breadcrumbs {
        $b: &;
    
        &__list {
            display: flex;
            flex-flow: row wrap;
            list-style: none;
            margin: 0;
            padding-left: 0;
        }
    
        &__item {
            margin-bottom: 0;
        }
    
        &__link {
            display: block;
            padding: config.$thin-padding;
            padding: config.$thin-v-space #{math.div(config.$thin-h-space, 2)};
            transition: color config.$fade-easing var(--duration-fast);
    
            // This left-aligns the text of the first link without reducing its
            // target size, by adding an equal negative left margin to the left padding.
            #{$b}__item:first-child & {
                margin-left: -#{math.div(config.$thin-h-space, 2)};
            }
        }
    
        &__linkSeparator {
            transform: translateX(50%);
        }
    }
    
  • URL: /components/raw/breadcrumbs/_index.scss
  • Filesystem Path: resources/styles/atoms/breadcrumbs/_index.scss
  • Size: 897 Bytes