Skip Nav

Skip Navigation link and destination container for screen readers and keyboard users.

Per WebAim.org on WCAG 2.4.1 (Bypass Blocks - Level A), because the main content is not always the first section that the user encounters on a page, it is strongly recommended to include a skip link for users to be able to bypass content that is present on multiple pages. Navigation links are the most common skipped.

A user with a screen reader or specialized software could skip content via the headings or main region, but this is not sufficiant enough for sighted users who primarily use a keyboard.

Imports#

import { SkipNavLink, SkipNavContent } from '@chakra-ui/skip-nav'

Usage#

The SkipNavLink component ideally needs to be one of the first items a user encounters when they begin navigating a page after load. Therefore, it is recommended to place it as high as possible in the app.

It renders an a tag and automatically creates a link with an href attribute that will point to SkipNavContent.

The SkipNavContent component is used as a target for the link to place keyboard focus on the first piece on main content. It renders a div and can either be a self-closing component, or wrap the main content.

You can supply a custom id value using the prop id but you will have to use this prop and value in both components, or they will not match. For Example: id="custom-id" renders href="#custom-id" in SkipNavLink and id="custom-id" in SkipNavContent.

<>
  // If you want to make it the first element the user encounters
  <SkipNavLink>Skip to content</SkipNavLink>
  <App />
</>

// And inside another component, like App
<div>
  <SkipNavContent />
  // The main content below
</div>

In Action#

You can see these components in action on this page!

1. Place your cursor in the browser's address bar.
2. Remove any id queries from the url. (i.e. /skip-nav#usage)
3. Hit Enter to reload the page, then hit Tab. The Skip Nav link will appear in the upper left.
4. Hitting Enter on the link will take you to the top of the docs content.

Props#

The SkipNavLink component composes the Box component and renders an a.

The SkipNavContent component composes the Box component and renders a div.