@chakra-xui/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-xui/skip-nav
# or
yarn add @chakra-xui/skip-nav

Import

import { SkipNavLink, SkipNavContent } from "@chakra-xui/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,
)

Change Log

1.0.2

Patch Changes

• Updated dependencies [e73878ee]:
  • @chakra-xui/utils@1.0.2

1.0.1

Patch Changes

• Updated dependencies [5c482483]:
  • @chakra-xui/utils@1.0.1

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @chakra-xui/skip-nav

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

• toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @chakra-xui/skip-nav

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @chakra-xui/skip-nav

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @chakra-xui/skip-nav

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @chakra-xui/skip-nav

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @chakra-xui/skip-nav

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @chakra-xui/skip-nav

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Note: Version bump only for package @chakra-xui/skip-nav

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @chakra-xui/skip-nav

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Note: Version bump only for package @chakra-xui/skip-nav

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @chakra-xui/skip-nav

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @chakra-xui/skip-nav

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

• #891 (e107acc)
• ts issue with sx prop (d3b1340)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

• #891 (e107acc)
• ts issue with sx prop (d3b1340)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes

• #891 (e107acc)