Skip navigation

Overview

Skip navigation is a styled link that appears at the top of a page when the Tab key is pressed. It bypasses the navigation and jumps users down to the main content when selected.

Sample pattern

Style

Skip to main content is a styled link that consists of a text label and a background container. Even though it looks like a Button, it functions more like a jump link.

Usage

A skip to main content link helps some users browse the web more effectively. It should be invisible on every page as a commitment to accessibility.

Best practices

Don't apply the skip to main content link style to other components.

Behavior

When a user presses the Tab key upon page load, the skip to main content link will appear centered at the top above the navigation. When a user presses the Enter key, the page will move down and the focus indicator should highlight the main content.

Spacing

A skip to main content link uses space tokens to define spacing values between elements.