Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Skip link

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-skip-linkImportingUsagerh-skip-link

Importing

Add rh-skip-link to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS shim

Warning

Lightdom CSS shims are an optional, temporary solution for reducing CLS. Learn more about lightdom CSS shims .

 
<link rel="stylesheet" href="/path/to/rh-skip-link/rh-skip-link-lightdom-shim.css">

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

Usage 

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

<script type="module">
  import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>
Copy to Clipboard Wrap lines

A skip link provides keyboard and screen reader users a way to bypass repetitive navigation and jump directly to main content. Use it when a page has many navigation items preceding the main content area. It should be the first focusable element on the page, and authors must provide either an href attribute or a slotted <a> element.

Slot Name Summary Description
[default]

An anchor element targeting the main page content, or plain text when the href attribute is set on the host. Slotted anchors must have an accessible name for screen readers.
Note: [default] unnamed slots do not have a slot="name" attribute.
Attribute DOM Property Description Type Default
href href

URL fragment (e.g. #main-content) identifying the target element to skip to. When set, the component renders its own anchor in shadow DOM and the default slot accepts plain text for the link label.

 
string
 
unknown

None

None

None

None

Token Description Copy
--rh-color-surface-lightest

Skip link background color

Primary surface (light theme)
--rh-color-border-interactive-on-light

Skip link border block end color

Skip link border inline start color

Skip link border inline end color

Interactive border color (light theme)
--rh-border-radius-default

Skip link bottom-start corner radius

Skip link bottom-end corner radius

3px border radius; Example: Card
--rh-color-interactive-primary-default-on-light

Skip link text color

Primary interactive - default (Light theme)
--rh-font-family-heading

Skip link font family

Heading font family
--rh-font-size-body-text-md

Skip link font size

16px font size
--rh-font-weight-heading-bold

Skip link font weight

Bold font weight for headings
--rh-border-width-md

Skip link focus border width

2px border width: Example: Alert
--rh-space-lg

Skip link focus padding block

16px spacer
--rh-space-2xl

Skip link focus padding inline

32px spacer
--rh-color-interactive-primary-hover

Skip link hover text color
--rh-border-width-sm

Skip link border block end width

Skip link border inline start width

Skip link border inline end width

Skip link hover underline thickness

Skip link hover border block end width

Skip link hover border inline start width

Skip link hover border inline end width

1px border width; Example: Secondary CTA or Button
--rh-color-interactive-primary-hover-on-light

Skip link hover border block end color

Skip link hover border inline start color

Skip link hover border inline end color

Primary interactive - hover (Light theme)
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify