Swegon Component Library

Breadcrumbs 

<ul class="breadcrumbs">
    <li class="breadcrumbs__item"><a href="#">Start</a></li>
    <li class="breadcrumbs__item"><a href="#">Products</a></li>
    <li class="breadcrumbs__item"><a href="#">Categories</a></li>
    <li class="breadcrumbs__item"><a href="#">Product</a></li>
</ul>
 
<ul class="breadcrumbs">
    {{#each items}}
        <li class="breadcrumbs__item"><a href="#">{{this}}</a></li>
    {{/each}}
</ul>
 
{
  "items": [
    "Start",
    "Products",
    "Categories",
    "Product"
  ]
}
  • Content: 
    .breadcrumbs {
    list-style: none;
    margin: 0;
    padding: size(1) size(3);
    font-size: size(1.5);

    &:after {
        content: "";
        clear: both;
        display: block;
    }
}

.breadcrumbs__item {
    float: left;
    margin: 0;
    padding: 0;

    &--dots {
        display: block;
        @include breakpoint($m) {
            display:  none;
        }
    }

    &.hidden-mobile {
        display: none;
        @include breakpoint($m) {
            display:  block;
        }
    }

    &:not(:last-child):after{
        content: "";
        display: block;
        float: right;
        width: size(1.25);
        height: size(2.75);
        margin: 0 size(.25);
        background: url("../../assets/icons/icon-chevron-right.svg") no-repeat center;
        background-size: 100% auto;
    }

    a {
        color: $color-black;
    }

    &:last-child a {
        color: $color-green;

        @include color-theme {
            color: $arg-theme-color;
        }
    }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: src/components/breadcrumbs/breadcrumbs.scss
  • Size: 1 KB

No notes defined.