Skip to main content Red Hat Design System logo Contribute on Github

Skip link

Overview Style Guidelines Code Accessibility

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

Status

What do these mean?
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>
Full screen 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