@chakra-ui/skip-nav
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

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

Dependencies (0)

    Dev Dependencies (3)

    Package Sidebar

    Install

    npm i @chakra-ui/skip-nav

    Weekly Downloads

    331,224

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    20.2 kB

    Total Files

    15

    Last publish

    Collaborators

    • segunadebayo
    • _codebender828