Mirage: BGA styles

5.6 navigation.skip-link Skip link

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

Examples

Default styling

Jump to navigation

:focus

Focus styling.

Jump to navigation

Markup: navigation/skip-link/skip-link.twig

<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"skip-link__wrapper"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#main-menu"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"skip-link visually-hidden visually-hidden--focusable </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span></span><span class="hljs-template-variable">{{content}}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
</span>

Source: navigation/skip-link/_skip-link.scss, line 1