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

Change Log

1.1.12

Patch Changes

• Updated dependencies [c06d242c6, 5b4d8ef24]:
  • @chakra-ui/utils@1.8.3

1.1.11

Patch Changes

• Updated dependencies [4c1071969, 43f66097b]:
  • @chakra-ui/utils@1.8.2

1.1.10

Patch Changes

• Updated dependencies [4a1e4d93b]:
  • @chakra-ui/utils@1.8.1

1.1.9

Patch Changes

• Updated dependencies [d0f50a46e, b479ff22e, 07d15eab4]:
  • @chakra-ui/utils@1.8.0

1.1.8

Patch Changes

• Updated dependencies [e9ac4cc76]:
  • @chakra-ui/utils@1.7.0

1.1.7

Patch Changes

• Updated dependencies [0974e547c, 59ea894a7]:
  • @chakra-ui/utils@1.6.0

1.1.6

Patch Changes

• Updated dependencies [8b5eb9654]:
  • @chakra-ui/utils@1.5.2

1.1.5

Patch Changes

• Updated dependencies [1a04a41bd, e481ba491]:
  • @chakra-ui/utils@1.5.1

1.1.4

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]:
  • @chakra-ui/utils@1.5.0

1.1.3

Patch Changes

• Updated dependencies [e748219f3, 91ef14839]:
  • @chakra-ui/utils@1.4.0

1.1.2

Patch Changes

• Updated dependencies [87cc23e14]:
  • @chakra-ui/utils@1.3.0

1.1.1

Patch Changes

• Updated dependencies [ff4a36bca, 483687237, 61962345c]:
  • @chakra-ui/utils@1.2.0

1.1.0

Minor Changes

• 90c7a4fbf #3092 Thanks @TimKolberger! - - Improved theme typing in order to provide a better autocomplete experience
  • Fixed a type issue where pseudo style props like _hover and _active didn't allow regular css properties

1.0.3

Patch Changes

• Updated dependencies [8b87406c]:
  • @chakra-ui/utils@1.1.0

1.0.2

Patch Changes

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

1.0.1

Patch Changes

• Updated dependencies [5c482483]:
  • @chakra-ui/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-ui/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-ui/skip-nav

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

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

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

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

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

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

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

Note: Version bump only for package @chakra-ui/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-ui/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-ui/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-ui/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-ui/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-ui/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-ui/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)