SkipNavigation

Enables users to skip from the top of the page directly to primary actions.

GuidelinesReact

When to use

  • To optimize for accessibility for people who navigate in a non-visual way.
  • To let users skip directly to the content that interests them.
  • At the top of a page.
  • To offer other actions associated with the entire page (such as submitting feedback).
  • To satisfy WCAG2.0 Criterion 2.4.1.

When not to use

Component status

Figma

React

iOS

Android

N/A
Released
N/A
N/A

Behavior

Skip repeated content

Content that repeats on many screens, such as navigation, is easy to skip when you know where it ends. That’s clear when the content is visual. But users need something else when they don’t have visual cues.

Offer links to skip repeated content so everyone can get to the content they’re interested in.

This is enormously helpful for people who go through your content in the order it’s presented. Without the option to skip, they have to go through irrelevant content to get to what they want. Skipping options lets them find content by what’s important to them, not where it is on the page.