5.6 navigation.skip-link Skip link

Toggle example guides Toggle HTML markup

To make the link completely hidden until a user tabs to the link, combine it with the visually-hidden component.

Examples
Default styling

:focus
Focus styling.

Markup: navigation/skip-link/skip-link.twig 
<p class="skip-link__wrapper">
  <a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable {{modifier_class}}">{{content}}</a>
</p>
Source: navigation/skip-link/_skip-link.scss, line 1