# @chakra-ui/skip-nav

> Skip navigation links for screen reader and keyboard users

Latest version **2.1.0** (published 2023-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chakra-ui/skip-nav
pnpm add @chakra-ui/skip-nav
yarn add @chakra-ui/skip-nav
bun add @chakra-ui/skip-nav
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2023-07-18 |
| First published | 2020-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40654 |
| Author | Segun Adebayo |
| Maintainers | segunadebayo, _codebender828 |
| Keywords | skip link, skip, link, navigation, a11y, screen reader, accessibility, react, chakra ui |

## Links

- npm: https://www.npmjs.com/package/@chakra-ui/skip-nav
- Repository: https://github.com/chakra-ui/chakra-ui
- Homepage: https://github.com/chakra-ui/chakra-ui#readme
- Issues: https://github.com/chakra-ui/chakra-ui/issues
- npm.io page: https://npm.io/package/@chakra-ui/skip-nav

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2023-07-18
- 0.0.0-dev-20230718132637 (dev) — 2023-07-18
- 0.0.0-next-dev-202241614737 (next-dev) — 2022-05-16
- 2.0.0-next.2 (next) — 2022-05-09
- 0.0.0-pr-202212011232 (pr) — 2022-02-20
- 0.0.0-canary-2021118164051 (canary) — 2021-12-08
- 0.0.0-dev-20230718130742 — 2023-07-18
- 0.0.0-dev-20230718124717 — 2023-07-18
- 0.0.0-dev-20230718122336 — 2023-07-18
- 2.0.15 — 2023-01-16
- 0.0.0-dev-20230116124502 — 2023-01-16
- 0.0.0-dev-20230116122157 — 2023-01-16
- 0.0.0-dev-20230116120206 — 2023-01-16
- 2.0.14 — 2023-01-12
- 0.0.0-dev-20230112154520 — 2023-01-12
- … 388 more at https://npm.io/package/@chakra-ui/skip-nav/versions

## README

# @chakra-ui/skip-nav

Skip navigation link for screen reader and keyboard users. Because the main
content is not usually the first thing in the document, it is valuable to
provide a shortcut for keyboard and screen reader users to skip to the content.

If the user does not navigate with the keyboard, they won't see the link.

## Install

```sh
npm i @chakra-ui/skip-nav
# or
yarn add @chakra-ui/skip-nav
```

## Import

```jsx
import { SkipNavLink, SkipNavContent } from "@chakra-ui/skip-nav"
```

## Usage

```jsx
ReactDOM.render(
  <>
    {/* 👇🏻 put the link at the top of your app */}
    <SkipNavLink>Skip to content</SkipNavLink>
    <div>
      <Navbar />
      {/* 👇🏻 and the content next to your main content */}
      <SkipNavContent>
        <App />
      </SkipNavContent>
    </div>
  </>,
  rootNode,
)
```

---
_Source: https://npm.io/package/@chakra-ui/skip-nav · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._