Skip Nav

Usage

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 sufficient for sighted users who primarily use a keyboard.

import { SkipNavContent, SkipNavLink } from "@chakra-ui/react"

<SkipNavLink>Skip to content</SkipNavLink>
<SkipNavContent />

Examples

Basic 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 of main content. It renders a div and can either be a self-closing component, or wrap the main content.

Custom ID

You can supply a custom id value using the id prop but you will have to use this prop and value in both components, or they will not match.

With Main Content

The SkipNavContent component can wrap your main content area to ensure proper focus management.

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.