<nav class="breadcrumbs breadcrumbs--products" aria-label="Breadcrumbs" role="navigation">
    <ol class="breadcrumbs__list ">
        <li class="breadcrumbs__item home ">
            <a href="#" class="breadcrumbs__link breadcrumbs__link--active link--invert">
                Home
            </a>
        </li>
        <li class="breadcrumbs__item category ">
            <a href="#" class="breadcrumbs__link link--invert">
                Handschoenen
            </a>
        </li>
        <li class="breadcrumbs__item category ">
            <a href="#" class="breadcrumbs__link link--invert">
                Kickboks handschoenen
            </a>
        </li>
        <li class="breadcrumbs__item product ">
            <a href="#" class="breadcrumbs__link link--invert">
                Venum Contender 2.0 Zwart - S
            </a>
        </li>
    </ol>
</nav>
<nav
        class="breadcrumbs breadcrumbs--products{{ class }}" {{{ attributes }}}
        aria-label="{{ ariaLabel }}"
        role="navigation"
    >
        <ol
            class="breadcrumbs__list {{ listClass }}" {{{ listAttributes }}}
        >
            {{#each categories}}
                <li class="breadcrumbs__item {{typeClass}} ">
                    <a
                        href="{{ href }}"
                        class="{{ linkClass }}"
                    >
                            {{ name }}
                    </a>
                </li>
            {{/each}}
        </ol>
    </nav>
{
  "ariaLabel": "Breadcrumbs",
  "categories": [
    {
      "name": "Home",
      "href": "#",
      "linkClass": "breadcrumbs__link breadcrumbs__link--active link--invert",
      "typeClass": "home"
    },
    {
      "name": "Handschoenen",
      "href": "#",
      "linkClass": "breadcrumbs__link link--invert",
      "typeClass": "category"
    },
    {
      "name": "Kickboks handschoenen",
      "href": "#",
      "linkClass": "breadcrumbs__link link--invert",
      "typeClass": "category"
    },
    {
      "name": "Venum Contender 2.0 Zwart - S",
      "href": "#",
      "linkClass": "breadcrumbs__link link--invert",
      "typeClass": "product"
    }
  ]
}
  • Content:
    $breadcrumbs__list-home--padding     : 0 $spacer--medium 0 0 !default;
    $breadcrumbs__list--padding          : $spacer--medium 0 !default;
    $breadcrumbs__border                 : 0.75px solid #393939 !default;
    $breadcrumbs__padding                : $spacer--medium $spacer--036 !default;
    $breadcrumbs__color                  : #a6a6a6 !default;
    $breadcrumbs__fill                   : $breadcrumbs__color !default;
    $breadcrumbs__font-family            : $font-family-saira !default;
    $breadcrumbs__color--active          : $breadcrumbs__color !default;
    $breadcrumbs__font-family--active    : $font-family-saira !default;
    $breadcrumbs__font-size              : $font-size-small !default;
    $breadcrumbs__font-weight--active    : $font-weight-bold !default;
    $breadcrumbs__text-decoration--active: none !default;
    $breadcrumbs__button--background     : rgba(188, 188, 188, 0.75);
    
    .breadcrumbs {
        @include mq($screen-m) {
            display: block;
            padding: 0;
        }
    
        &__list {
            display: flex;
            flex-wrap: wrap;
            margin: $spacer--05 0;
            padding: 0;
            @include mq($screen-m) {
                margin: $spacer--1 0;
            }
        }
    
        &__item {
            display: flex;
            align-items: stretch;
            font-size: $breadcrumbs__font-size;
            height: 2.3rem;
            text-decoration: none;
            font-family: $breadcrumbs__font-family;
            padding: 14px 0;
            &.category,
            &.content,
            &.product {
                padding: 0 15px 0 10px;
                &:before {
                    content: "";
                    margin: 0 $spacer;
                    width: 1em;
                    height: 1em;
                    background-image: url('/images/icons/angle-left.svg');
                    background-repeat: no-repeat;
                    background-size: 11px 11px;
                    color: transparent;
                    display: inline-block;
                    background-position: center;
                }
            }
            &.home {
                & a {
                    &:before {
                        content: "";
                        margin: 0 $spacer;
                        width: 1em;
                        height: 1em;
                        background-image: url('/images/icons/angle-left.svg');
                        background-repeat: no-repeat;
                        background-size: 11px 11px;
                        color: transparent;
                        display: inline-block;
                        background-position: center;
                        filter: brightness(0) invert(1);
                    }
                }
             }
            &:not(:first-child) {
                text-decoration: $breadcrumbs__text-decoration--active;
                align-items: center;
                padding: $breadcrumbs__padding;
                font-family: $breadcrumbs__font-family--active;
                color: $breadcrumbs__color--active;
    
                &:hover {
                    filter: brightness(70%);
                    cursor: pointer;
                }
            }
            &:first-of-type {
                border-radius: $border-radius;
                background-color: $breadcrumbs__button--background;
                color: $white;
                padding: $breadcrumbs__list-home--padding;
    
                &:hover {
                    background-color: darken($breadcrumbs__button--background, 10%);
                    color: $gray-lightest;
                }
    
                & .breadcrumbs__link {
                    font-weight: bold;
                    color: $white;
                }
    
                & svg.icon {
                    fill: #fff;
                    height: $spacer--m;
                    width: $spacer--m;
                    padding: $spacer--036;
                }
            }
            &:last-child {
                & .icon {
                    fill: $breadcrumbs__fill;
                    height: $spacer--m;
                    width: $spacer--m;
                    padding: $spacer--036;
    
                }
                &:hover {
                    color: $gray-light;
                    cursor: pointer;
                }
            }
        }
    
        &__link {
            color: $breadcrumbs__color;
            display: flex;
            align-items: center;
            font-family: $breadcrumbs__font-family;
            text-decoration: none;
            background-clip: content-box;
    
            & svg.icon {
                fill: $breadcrumbs__fill;
                height: $spacer--m;
                width: $spacer--m;
                padding: $spacer--036;
            }
    
            &:hover {
                color: $gray;
                cursor: pointer;
            }
    
            &--active {
                &:before {
                    background: url('/images/icons/angle-left-active.svg') no-repeat;
                    background-size: 11px 11px;
                }
            }
        }
    
        & + .page-main {
            & .heading--page {
                margin-top: 0;
            }
        }
    
        &--white {
            background: $black;
            &__item {
                &:not(:first-child) {
                    color: $white;
    
                    &:hover {
                        filter: brightness(70%);
                        cursor: pointer;
                    }
                }
                &:last-child {
                    &:hover {
                        filter: brightness(70%);
                        cursor: pointer;
                        color: $white;
                    }
                }
            }
    
            &__link {
                color: $white;
    
                &:hover {
                    cursor: pointer;
                    color: $white;
                }
    
                &:before {
                    background: url('/images/icons/angle-left-active.svg') no-repeat;
                    background-size: 11px 11px;
                }
            }
    
            & .breadcrumbs__icon {
                fill: $white;
            }
        }
    
        & .container {
            width: 100%;
        }
    }
    
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: build/components/02-elements/breadcrumbs/_breadcrumbs.scss
  • Size: 5.6 KB

There are no notes for this item.