Skip Nav

• Source: https://github.com/reach/reach-ui/tree/main/packages/skip-nav
• WAI-ARIA: https://webaim.org/techniques/skipnav/

Skip navigation link for screen reader and keyboard users. Because the main content is not usually the first thing in the document, it's valuable to provide a shortcut for keyboard and screen reader users to skip to the content.

If the user does not navigate with the keyboard, they won't see the link.

For a demo, click some empty space on this page to move focus to the document body, then hit the "tab" key You'll see the link pop up. Hit enter, then tab again. Rather than cycling through the navigation, you are tabbing through the main content of the page.

ReactDOM.render(  <React.Fragment>    {/* put the link at the top of your app */}    <SkipNavLink />    <div>      <YourNav />      {/* and the content next to your main content */}      <SkipNavContent />      <YourMainContent />    </div>  </React.Fragment>,  rootNode);

Installation

From the command line in your project directory, run npm install @reach/skip-nav or yarn add @reach/skip-nav. Then import the components and styles:

npm install @reach/skip-nav# oryarn add @reach/skip-nav

import { SkipNavLink, SkipNavContent } from "@reach/skip-nav";import "@reach/skip-nav/styles.css";

Component API

SkipNavLink

Renders a link that remains hidden until focused to skip to the main content.

SkipNavLink CSS Selectors

[data-reach-skip-link] {}[data-reach-skip-link]:focus {}

SkipNavLink Props

SkipNavLink anchor props

Element props are spread to the underlying link.

SkipNavLink children

children?: React.ReactNode

Allows you to change the text for your preferred phrase or localization. If no children are passed, the link will display Skip to content.

<SkipNavLink>saltar al contenido</SkipNavLink>

SkipNavContent

Renders a div as the target for the link.

SkipNavLink Props

SkipNavLink children

children?: React.ReactNode

You can place the SkipNavContent element as a sibling to your main content or as a wrapper:

<SkipNavContent /><YourMainContent />
// or
<SkipNavContent>  <YourMainContent /></SkipNavContent>

Keep in mind it renders a div, so it may mess affect your page styles depending on where it’s placed.