<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.