<nav class="breadcrumbs margin-vc-s" aria-label="Breadcrumbs" role="navigation">
    <ol class="breadcrumbs__list ">
        <li class="breadcrumbs__item">
            <a href="#" class="breadcrumbs__link">
                Home
            </a>
        </li>
        <li class="breadcrumbs__item">
            <a href="#" class="breadcrumbs__link">
                category2
            </a>
        </li>
        <li class="breadcrumbs__item">
            <a href="#" class="breadcrumbs__link">
                category3
            </a>
        </li>
        <li class="breadcrumbs__item">
            <a href="#" class="breadcrumbs__link">
                category4
            </a>
        </li>
        <li class="breadcrumbs__item">
            <a href="#" class="breadcrumbs__link">
                category5
            </a>
        </li>
        <li class="breadcrumbs__item" aria-current="true">
            category6
        </li>
    </ol>
</nav>
<nav
    class="breadcrumbs {{ class }}" {{{ attributes }}}
    aria-label="{{ ariaLabel }}"
    role="navigation"
>
    <ol
        class="breadcrumbs__list {{ listClass }}" {{{ listAttributes }}}
    >
        {{#each categories}}
            {{#if @last}}
                <li
                    class="breadcrumbs__item"
                    aria-current="true"
                >
                    {{ name }}
                </li>
            {{else}}
                <li class="breadcrumbs__item">
                    <a
                        href="{{ href }}"
                        class="{{ linkClass }}"
                    >
                        {{ name }}
                    </a>
                </li>
            {{/if}}
        {{/each}}
    </ol>
</nav>
{
  "ariaLabel": "Breadcrumbs",
  "class": "margin-vc-s",
  "categories": [
    {
      "name": "Home",
      "href": "#",
      "linkClass": "breadcrumbs__link"
    },
    {
      "name": "category2",
      "href": "#",
      "linkClass": "breadcrumbs__link"
    },
    {
      "name": "category3",
      "href": "#",
      "linkClass": "breadcrumbs__link"
    },
    {
      "name": "category4",
      "href": "#",
      "linkClass": "breadcrumbs__link"
    },
    {
      "name": "category5",
      "href": "#",
      "linkClass": "breadcrumbs__link"
    },
    {
      "name": "category6",
      "href": "#"
    }
  ]
}
  • Content:
    $breadcrumbs__display\@mobile        : block !default;
    $breadcrumbs__display-mq             : $screen-l !default;
    $breadcrumbs__margin                 : $spacer !default;
    $breadcrumbs__padding                : $spacer 0 !default;
    $breadcrumbs__min-height             : 24px !default;
    
    $breadcrumbs__color                  : $color-secondary !default;
    $breadcrumbs__color--active          : $color-primary !default;
    
    $breadcrumbs__font-family            : $font-family-base !default;
    $breadcrumbs__font-family--active    : $font-family-base !default;
    $breadcrumbs__font-size              : $font-size-base !default;
    $breadcrumbs__line-height            : 24px !default;
    
    
    $breadcrumbs__list-padding           : 0 !default;
    $breadcrumbs__list-margin            : 0 !default;
    $breadcrumbs__list-flow              : row wrap;
    
    $breadcrumbs__item-padding           : 0 !default;
    
    $breadcrumbs__link-padding           : 0 !default;
    
    $breadcrumbs__text-decoration        : none !default;
    $breadcrumbs__text-decoration--active: none !default;
    $breadcrumbs__text-decoration--hover : underline !default;
    
  • URL: /components/raw/breadcrumbs/_breadcrumbs-variables.scss
  • Filesystem Path: build/components/Molecules/breadcrumbs/_breadcrumbs-variables.scss
  • Size: 1.1 KB
  • Content:
    @import 'breadcrumbs-variables';
    
    .breadcrumbs {
        display: $breadcrumbs__display\@mobile;
        min-height: $breadcrumbs__min-height;
        padding: $breadcrumbs__padding;
    
        @include mq($breadcrumbs__display-mq) {
            display: block;
        }
    
        &__list {
            display: flex;
            flex-flow: $breadcrumbs__list-flow;
            margin: $breadcrumbs__list-margin;
            padding: $breadcrumbs__list-padding;
        }
    
        &__item {
            display: flex;
            padding: $breadcrumbs__item-padding;
            align-items: stretch;
            color: $breadcrumbs__color;
            font-size: $breadcrumbs__font-size;
            text-decoration: $breadcrumbs__text-decoration;
    
            &:after {
                content: '/';
                display: flex;
                align-items: center;
                margin: 0 $breadcrumbs__margin;
                color: $breadcrumbs__color;
            }
    
            &:first-of-type {
                .breadcrumbs__link {
                    padding-left: 0;
                }
            }
    
            &:last-child {
                &:not(:first-child) {
                    align-items: center;
                    font-family: $breadcrumbs__font-family--active;
                    color: $breadcrumbs__color--active;
                    text-decoration: $breadcrumbs__text-decoration--active;
                }
    
                &:after {
                    display: none;
                }
            }
        }
    
        &__link {
            display: flex;
            align-items: center;
            padding: $breadcrumbs__link-padding;
            font-family: $breadcrumbs__font-family;
            line-height: $breadcrumbs__line-height;
            color: $breadcrumbs__color;
            text-decoration: $breadcrumbs__text-decoration;
            background-clip: content-box;
        }
    }
    
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: build/components/Molecules/breadcrumbs/_breadcrumbs.scss
  • Size: 1.7 KB

There are no notes for this item.