Design Tokens for Mesh have just been released!
Skip to content

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.

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

Props

PropTypeDefaultDescription
link (required)stringThe 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)stringThe text displayed in the skip link. It should be something like "Skip to X".

Target

PropTypeDefaultDescription
id (required)stringThe unique id of the target element. Should match the link prop of the SkipLink component (without the #).
componentstring or componentdivThe 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.