Skip Nav

Skip Nav Link allows keyboard users to skip to the main content of the page.

Navigation

This represents a navigation area that users might want to skip over.

Main Content

This is the main content area. When users press Tab and then Enter on the "Skip to Content" link, focus will jump directly here, bypassing the navigation.

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-solid";

<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.

Navigation

This represents a navigation area that users might want to skip over.

Main Content

This is the main content area. When users press Tab and then Enter on the "Skip to Content" link, focus will jump directly here, bypassing the navigation.

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.

Header & Navigation

This example uses a custom ID "main-content" for both components to ensure they match.

Main Content (Custom ID)

Both the SkipNavLink and SkipNavContent use the same custom ID "main-content" to ensure proper linking and focus management.

With Main Content

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

Site Header

• Home

• About

• Services

• Contact

Welcome to Our Site

This is the main content area. The SkipNavContent component wraps this entire section, making it the target for the skip navigation link.

When keyboard users press Tab to focus the "Skip to Content" link and then press Enter, focus will jump directly to this content area, bypassing all the navigation items above.

This is especially helpful for users with screen readers or those who navigate primarily with keyboards.

In Action

You can see these components in action on this page!

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

Props

SkipNavLinkProps
Prop	Default	Type
`id`	`'chakra-skip-nav'`	`string` The id of the {@link SkipNavContent} to jump to. It becomes the link's `href`, not the link's own `id`.

Plus HTMLChakraProps<"a"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

SkipNavContentProps
Prop	Default	Type
`id`	`'chakra-skip-nav'`	`string` The id the {@link SkipNavLink} points at. Pass the same value to both or neither.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.