This component enables users to bypass repetitive navigation links and jumps directly to the main content. It enhances accessibility for keyboard and screen reader users by improving navigation efficiency and is typically hidden until focused.

Main Content

To navigate using the skip link: Press the Tab key after clicking on the preview window. A skip link will appear at the top of the story's viewport (overlapping the menu bar). This skiplink component allows you to bypass the navigation menu and jump directly to the main content. Press Enter while the skip link is focused to activate it. You'll be taken straight to the main content area, saving you from having to tab through all the navigation items. This feature is particularly helpful for keyboard users and people using screen readers.

Usage

import { Skiplink } from "@govtechmy/myds-react/skiplink";

export default () => (
  <Skiplink href="#main-content">
    <span>Skip to main content</span>
  </Skiplink>
  <main id="main-content">
    <span className="text-slate-600">
      Main content here
    </span>
  </main>
);

Props

Skiplink

Prop	Type	Default
`href`	`string`	`-`

MYDS

Skiplink

Main Content

Usage

Props

Skiplink

On this page