Alpaca components for Magento 2

Skip Nav: List 

<ul class="list">
    <li class="list__item">
        <a href="#header" class="skip-nav ">
            Go to top
        </a>
    </li>
    <li class="list__item">
        <a href="#maincontent" class="skip-nav ">
            Go to main content
        </a>
    </li>
</ul>

<script src="/components/raw/skip-nav/skip-nav.js" defer></script>
 
<ul class="list">
    {{#each anchor }}
        <li class="list__item">
            <a
                href="{{ value }}"
                class="skip-nav "
            >
                {{ text }}
            </a>
        </li>
    {{/each}}
</ul>

{{#if script}}
    <script src="{{static 'skip-nav.js'}}" defer></script>
{{/if}}
 
{
  "text": "Skip to content",
  "anchor": [
    {
      "value": "#header",
      "text": "Go to top"
    },
    {
      "value": "#maincontent",
      "text": "Go to main content"
    }
  ],
  "script": true
}
  • Content: 
    $skip-nav__padding         : $spacer--small $spacer--extra-large !default;
$skip-nav__margin          : $spacer !default;
$skip-nav__background-color: $color-primary !default;
$skip-nav__color           : $white !default;
$skip-nav__text-decoration : none !default;
$skip-nav__margin--relative: $spacer--medium !default;
$skip-nav__z-index         : $z-index-normal !default;

.skip-nav {
    @include visually-hidden('focus');
    padding: $skip-nav__padding;
    top: 0;
    left: 0;
    z-index: $skip-nav__z-index;

    &.focus-visible,
    &:focus,
    &:active,
    &:hover {
        position: absolute;
        margin: $skip-nav__margin;
        background-color: $skip-nav__background-color;
        color: $skip-nav__color;
        text-decoration: $skip-nav__text-decoration;
    }

    &--relative {
        &.focus-visible,
        &:active,
        &:focus,
        &:hover {
            position: relative;
            display: block;
            margin: $skip-nav__margin--relative;
        }
    }
}
  • URL: /components/raw/skip-nav/_skip-nav.scss
  • Filesystem Path: build/components/Organisms/skip-nav/_skip-nav.scss
  • Size: 1 KB
  • Content: 
    'use strict';
const skipNavLink = document.querySelector('.skip-nav');

function skipNavigation(skipElem) {
  skipElem.addEventListener('click', (e) => {
    let targetElem = document.querySelector(e.target.hash);
    if (targetElem) {
      targetElem.setAttribute('tabindex', -1)
      targetElem.focus();
      targetElem.addEventListener('focusout', (e) => {
        e.target.removeAttribute('tabindex');
      })
    }
  })
}

skipNavigation(skipNavLink);
  • URL: /components/raw/skip-nav/skip-nav.js
  • Filesystem Path: build/components/Organisms/skip-nav/skip-nav.js
  • Size: 461 Bytes

No notes defined.