Package Exports

@chakra-ui/skip-nav
@chakra-ui/skip-nav/dist/chakra-ui-skip-nav.cjs.js
@chakra-ui/skip-nav/dist/chakra-ui-skip-nav.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/skip-nav) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

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

Import

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

Usage

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,
)