Examples

Code

Make sure you include an id at the beginning of your main content and that it matches the skipnav link.

React

Preact/React documentation for Storybook

Guidance

When to use

• Skip navigation links should come before a long list of navigation links. Most commonly, this occurs before a site's main navigation.

Usage

• Skip navigation can be visually hidden at first or displayed visually at all times, depending on user needs and design requirements.
• Skip navigation should appear visually on focus.
• The link should skip the user to the main content of the page.
• More than one skip link can be on a page, but be mindful of creating too many.
• Adding a tabindex="-1" on the container being skipped to allows older browsers to programmatically move focus properly.

Learn More

• Skip Navigation Links on WebAIM

Component maturity