Developer mode
Opens components on the React tab by default.
Your bookmarks

SkipNavigation

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

When designing with accessibility in mind, it’s important to remember that not everyone will navigate your pages in the same way. Some people will go through all of your content in the order it’s presented, which often means having to navigate through the same menus on every single page.

SkipNavigation components at the top of pages offer these people the option to skip past the repeated content and get right to the primary actions on the given page. It can help you satisfy WCAG2.0 Criterion 2.4.1 and won’t clutter up your designs for anyone who isn’t using it. 

SkipNavigation components can include other common actions at the start of the page, such as submitting feedback or requesting a refund.

If you want to let users skip past parts of smaller components of the page, consider a skip link.

Component status

Figma
n/a
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Guidelines

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. It lets them find content by what’s important to them, not where it is on the page.

Related components

SkipLink

SkipNavigation components work only at the top of a page. For links inside other components, consider a SkipLink component.