Skip To Navigation

A simple Skip To option to give screenreader users a way to jump to your navigation or content or anything else.

Usage

Twig code:

{# Import the macro #}
{% from "@miz/components/navigation/skip-to/skip-to.twig" import SkipTo as skipTo %}
\

{# Set macro options #}
{% set mySkipToOptions = {
  "links": [{
    "text": "Skip to navigation",
    "href": "#navigation"
  },{
    "text": "Skip to content",
    "href": "#main-content"
  }]
} %}

{# Call the macro with options #}
{{ skipTo( mySkipToOptions ) }}

Output:

<!-- Skip To Navigation output -->
<div class="miz-skip-to">
  <a href="#navigation" class="miz-skip-to__link">Skip to navigation</a>
  <a href="#main-content" class="miz-skip-to__link">Skip to content</a>
</div>

Macro reference

SkipTo( options )

Param Default Values Description
class miz-skip-to string Additional classes appended to the containing <div>
attributes null object Attributes to be applied to the containing <div>
links null array Array of Link objects. _See SkipToLink below for available options

Each link in the links array above has the following options.

Param Default Values Description
class miz-skip-to__link string Additional classes appended to the button
attributes null object Attributes to be applied to the button
text No Text string Text to be used in the skip link. It is a good idea to be succinct and direct: “Skip to …”
href # string Anchor you’re pointing to within the page. This also needs to be set on the component you’re linking to, such as main content (#content) or navigation (#navigation).
{% from "@miz/components/navigations/skip-to/skip-to.twig" import SkipTo as skipTo %}

{% set skipToOptions = {
  "links": [{
    "text": "Skip to navigation",
    "href": "#navigation"
  },{
    "text": "Skip to content",
    "href": "#main-content"
  }]
} %}

{{ skipTo( skipToOptions ) }}
<div class="miz-skip-to">
    <a href="#navigation" class="miz-skip-to__link">Skip to navigation</a>
    <a href="#main-content" class="miz-skip-to__link">Skip to content</a>
</div>
/* No context defined for this component. */
  • Content:
    // Skip to navigation
    // Used to hide a skip nav
    .miz-skip-to {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1000;
    }
    
    // Link element for the skip nav
    .miz-skip-to__link {
      position: absolute;
      left: -10000px;
      top: auto;
      overflow: hidden;
      background-color: $miz-gold;
    
      &:focus,
      & ~ &:focus {
        padding: $miz-space-inset-default;
        position: static;
        display: inline-block;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
      }
    }
    
  • URL: /components/raw/miz-skip-to/skip-to.scss
  • Filesystem Path: fractal/pattern-library/miz/components/navigations/skip-to/skip-to.scss
  • Size: 467 Bytes