Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements 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 Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Skip link

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeConfigurationPlacementSpaceInteraction statesStyleColor schemeConfigurationPlacementSpaceInteraction states

Style

A skip link is designed to be easily seen once a user navigates to it.

Anatomy

Anatomy image showing calls to action with various annotation numbers
  1. Text label
  2. Container
  3. Border

Color scheme

A skip link appears the same in both light and dark color schemes.

Image of a skip link in a light scheme section Image of a skip link in a dark scheme section

Configuration

A skip link’s bottom corners have a border radius of 4px, which matches the border radius of the call to action element. The top corners have a border radius of 0px to keep the top edge flush with the top of the page.

Placement

A skip link should be centered and aligned with the top edge at all viewport sizes. It also overlaps items at the top of the page.

A skip link element at the top overlays the navigation header of redhat.com

Space

A skip link element at the top overlays the navigation header of redhat.com

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Focus

Because a skip link is in focus once it appears on the screen, the default and focus states are the same. The blue, 2px-wide border mimics the focus ring for other elements.

A skip link with blue text and a blue border around three sides

Hover

A skip link's text is underlined on hover

Active

Helpful tip

The Active state has the same styles as the Hover state.

A skip link's text is underlined when it's active
© 2021-2025 Red Hat, Inc. Deploys by Netlify