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).
{#
  Skip navigation
  Skip navigation component.

  @uses   AppendClasses, AddAttributes from @miz/utilties/utils.twig
  @uses   SkipToLink from @miz/components/navigations/skip-to/skip-to.twig

  @param  {object}    options
  @param  {string}    ├─ options.class
  @param  {object}    ├─ options.attributes
  @param  {array}     └─ options.links Array of link objects; See below.

#}
{% macro SkipTo( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% import "@miz/utilities/utils.twig" as utils %}
    {% from "@miz/components/navigations/skip-to/skip-to.twig" import SkipToLink as skipToLink %}

    {# Parameters #}
    {% set skipToClass      = "miz-skip-to" %}
    {% set skipToClass      = options.class ? utils.AppendClasses( skipToClass, options.class ) : skipToClass %}
    {% set skipToAttributes = options.attributes ? utils.AddAttributes( options.attributes ) : null %}
    {% set skipToLinks      = options.links %}

  {% endspaceless -%}

  <div class="{{ skipToClass }}"{{ skipToAttributes }}>
    {% for link in skipToLinks %}
      {{ skipToLink( link ) }}
    {% endfor %}
  </div>

{% endmacro %}

{#
  Skip To Link
  Skip To link component.

  @uses   AppendClasses, AddAttributes from @miz/utilties/utils.twig

  @param  {object}    options
  @param  {string}    ├─ options.class
  @param  {object}    ├─ options.attributes
  @param  {string}    ├─ options.text
  @param  {string}    └─ options.href

#}
{% macro SkipToLink( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% import "@miz/utilities/utils.twig" as utils %}

    {# Parameters #}
    {% set skipToLinkClass      = "miz-skip-to__link" %}
    {% set skipToLinkClass      = options.class ? utils.AppendClasses( skipToLinkClass, options.class ) : skipToLinkClass %}
    {% set skipToLinkAttributes = options.attributes ? utils.AddAttributes( options.attributes ) : null %}
    {% set skipToLinkText       = options.text ?: "No Text" %}
    {% set skipToLinkHref       = options.href ?: "#" %}

  {% endspaceless -%}

  <a href="{{ skipToLinkHref }}" class="{{ skipToLinkClass }}"{{ skipToLinkAttributes }}>{{ skipToLinkText }}</a>
{%- endmacro %}

        
    
/* 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