SkipLink

You might say

Keyboard users have to press Tab too many times to reach the main content. Can they jump there directly?

A link that lets keyboard users skip repeated navigation and move to the main contentA skip link appears when someone starts tabbing through a page and moves focus past repeated header links to the main content. It is not ordinary navigation, and it needs a visible focus state and a working target.

Skip to content

Brand Documentation Component Settings

Main content starts here

Quick checkChoose the best answer

Keyboard users Tab through a long navigation on every page before reaching content. What should be provided?

Provide a focusable Skip to main content link at page start that targets mainPermanently hide main so people do not pass navigationAutomatically move everyone to main on page load

You can say this to an AI Agent

Add a Skip to main content link first in page order, visible on keyboard focus, targeting the single main region. Ensure the target can receive focus, for example with tabindex="-1" when needed. Press Enter from the link and confirm document.activeElement moves into main; it should not occupy layout during normal pointer browsing.

SkipLink≠Anchor

skip-link is a keyboard shortcut available when entering a page. Anchor is an in-page table of contents that anyone can use.

When to use it

Long site header
Keyboard navigation
Pages with repeated controls

When NOT to use it

Hiding it from keyboard focus
Linking to a missing or unclear target
Using it to hide essential navigation

Anatomy

Repeat navigation

Main content

Placed before repeated navigation, usually as the first focusable link

The focus should fall here after the jump

Variants

Focus reveal

Common practices when pages need to skip repeated navigation

Visible top

When a skip link should remain visible instead of appearing only on focus

Typical use cases

Documentation page

Brand Product Price Login

Home page main content

Product site

Catalog Guide API Example

Document text

Long article

Project Members Settings Notifications

Project workspace