---
id: skip-nav
category: navigation
title: Skip Nav
package: '@chakra-ui/skip-nav'
description:
  Skip Nav Link allows keyboard users to skip to the main content of the page.
---

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

Per WebAim.org on
[WCAG 2.4.1 (Bypass Blocks - Level A)](https://webaim.org/standards/wcag/checklist#sc2.4.1),
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.

<ComponentLinks
  github={{ package: 'skip-nav' }}
  npm={{ package: '@chakra-ui/skip-nav' }}
/>

<carbon-ad></carbon-ad>

## Imports

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

```jsx live=false
<>
  // 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.