Stable

Skip Link

The Skip Link component helps keyboard-only and screen-reader users skip to the main content on a page, this includes skipping over the header and navigation. The Skip Link is visually hidden until a keyboard press focuses and activates it.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab

Installation

bash

npm install @nib-components/skip-link

Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.

Usage

jsx

import {SkipLink, Target} from '@nib-components/skip-link';

For a general "Skip to Content" link you should include the SkipLink component as the first interactive child on your page. There is no special logic to make the SkipLink the first focussable element. That comes from its position in the DOM.

The Target component is the area of the page that the link should throw you to. Note that it does not need to be in the same file.

Interactive demo

jsx

<>
  <SkipLink link="#content-example" text="Skip to content" />

  <nav>
    <ul>
      <li>
        <a href="#">A list of links for you to skip</a>
      </li>
      <li>
        <a href="#">A list of links for you to skip</a>
      </li>
    </ul>
  </nav>

  <Target id="content-example" component="main">
    <p>Some example target content</p>
  </Target>
</>

<>
  <SkipLink link="#content-example" text="Skip to content" />

  <nav>
    <ul>
      <li>
        <a href="#">A list of links for you to skip</a>
      </li>
      <li>
        <a href="#">A list of links for you to skip</a>
      </li>
    </ul>
  </nav>

  <Target id="content-example" component="main">
    <p>Some example target content</p>
  </Target>
</>

Props

SkipLink

Prop	Type	Default	Description
`link` (required)	string		The `href` link of this skip link. It will match the id specified in the corresponding `Target` component and should begin with the `#` symbol.
`text` (required)	string		The text displayed in the skip link. It should be something like "Skip to X".

Target

Prop	Type	Default	Description
`id` (required)	string		The unique `id` of the target element. Should match the `link` prop of the `SkipLink` component (without the `#`).
`component`	string or component	`div`	The underlying element of the component. If specifying a DOM element, do so as a string: `component="main"`. If specifying a React component, do so as a function: `component={Foo}`.

Considerations

The Skip Link should be the first focusable element.

Ensure that the link prop of the SkipLink matches the id of the Target.

You don't need to include the skip link component if you are using the Header Footer Layout component as it is already included in that layout. You also don't need to include the skip link if there is no content to skip over.

Header Footer Layout

Edit this page