Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

SkipNav

The SkipNav component from Reach-UI. This allows a user using a screen reader to skip over the navigation to quickly access the main content.

SkipNav is implemented using two components:

  • SkipNavLink: The link to be placed at the top of your app tree. It will remain hidden unless focused via keyboard.
  • SkipNavContent: Place this component before your content and after your navigation.

See the documentation at the Reach-UI website for full usage details, and thank Ryan Florence for making accessibility a priority.

Basic usage

<React.Fragment>
  {/* the SkipNavLink goes at the top of your app */}
  <SkipNavLink />
  <div>
    <div>Your nav contents</div>
    {/* while SkipNavContent goes just before your main content */}
    <SkipNavContent />
    <main>The main content</main>
  </div>
</React.Fragment>