Alpaca components for Magento 2

Breadcrumbs 

<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        : none !default;
$breadcrumbs__display-mq             : $screen-l !default;
$breadcrumbs__margin                 : $spacer !default;
$breadcrumbs__padding                : $spacer 0 !default;
$breadcrumbs__min-height             : 40px !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__link-text-decoration   : $breadcrumbs__text-decoration !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__link-text-decoration;
        background-clip: content-box;
    }
}
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: build/components/Molecules/breadcrumbs/_breadcrumbs.scss
  • Size: 1.7 KB

No notes defined.