Overview

A skip link is used to skip repetitive content on a page. It is hidden by default and can be activated by hitting the "Tab" key after loading/refreshing a page.

Image of a skip link
Figma library
Ready
Responsive
Ready
RH Elements
Ready
webRH
Planned

Sample element

To show the skip link, click this paragraph and hit the "Tab" key on your keyboard to show the skip link.

Skip to demo

Demo

View a live version of this component and see how it can be customized.

<rh-skip-link>
<a href="#main-content">Skip to main content</a>
</rh-skip-link>

<h1>Skip link</h1>
<p>To show the skip link, click the white background and press your tab key.</p>

<link rel="stylesheet" href="../rh-skip-link-lightdom-shim.css">
<script type="module">
import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>
View the demo

When to use

  • When there are many navigation items preceding main content
  • When there are blocks of content that are repeated on multiple pages
Property Status Meaning
Figma library Ready Component is available in the Figma library
Responsive Ready Component responds to changing viewport sizes in Figma and the browser
RH Elements Ready Component is available as a web component
webRH Planned Component is scheduled to become a web component
© 2021-2024 Red Hat, Inc. Deploys by Netlify