Skip to main content

Skip Links

Component
Live

The Skip Links component allows users to jump to different content areas on a page.

Code

Usage​

The Skip Links component is used to allow keyboard users and assistive devices to quickly jump to different parts of the page by using the the element id as a link.

The links prop can be a single object or multiple objects which are then converted into a nav list of links that users can navigate using tab or shift+tab. Due to these links being rendered as a list in this way it is important to ensure that the SkipLinks component to be the first component in your App.

You must also ensure that the id values that you are using in your links prop exist in the page. For example for a simple skip to main content, add an id="main" to your main tag, (eg. main id="main") and then it can be passed into the links prop.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { SkipLinks } from "@iag/chroma-react-ui.components";

When to use​

The Skip Links component is an important accessibility feature that can be used multiple times in a page. Use Skip Links to ensure users do not have to tab through links in a header or navigation every time they visit a page. It can also be used to skip areas on the page that are cumbersome for keyboard users and assistive devices, such as carousels or galleries.