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.
- 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.
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>
When to use
- When there are many navigation items preceding main content
- When there are blocks of content that are repeated on multiple pages
Status checklist
Property | Status | Meaning |
---|---|---|
Figma library |
|
Component is available in the Figma library |
Responsive |
|
Component responds to changing viewport sizes in Figma and the browser |
RH Elements |
|
Component is available as a web component |
webRH |
|
Component is scheduled to become a web component |
Related elements or patterns
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit