SkipNav

This documentation is currently being revised and is in beta status. Content may still change.

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

A hidden navigation can be created using the SkipNav component. It is used to enable visually impaired people to skip over side areas. It only becomes visible after clicking the Tab key.

Construction

Press Tab to show the skip navigation

Links (Label/Href)

<KolSkipNav _label="Skip Navigation" _links={[{"_label":"Navigation","_href":"#nav"},{"_label":"Content","_href":"#main"},{"_label":"Contact","_href":"#contact"}]} />

Usage

The SkipNav is created by passing a JSON object that is responsible for rendering the hidden links.

[
 { _label: 'Navigation', _href: '#nav' },
 { _label: 'Content', _href: '#main' },
 { _label: 'Contact', _href: '#contact' },
 { _label: 'Links', _href: '#links' },
];

Keyboard controls

button	Function
Tab	Focuses the SkipNav and allows you to scroll through the menu items.
Enter	Calls the link of the focused menu item.

Links and references

API

Overview

The SkipNav component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key.

Properties

Property	Attribute	Description	Type	Default
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_links (required)	_links	Defines the list of links combined with their labels to render.	LinkProps[] | string	undefined

Methods

focus

focus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

---

Examples