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 group 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 Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall 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 Since v1.4.0

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

Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once.
--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

Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional.
--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

Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional.
--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