SkipNav
#SkipNav
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
Code
<kol-skip-nav
_label="Ein versteckter Link"
_links="[{'_label':'Navigation','_href':'#nav'},{'_label':'Inhalt','_href':'#main'},{'_label':'Kontakt','_href':'#kontakt'},{'_label':'Links','_href':'#links'}]"
></kol-skip-nav>
Example
To see the SkipNav, click on this text and then go one step further with the Tab key.
Usage
The SkipNav is created by passing a JSON object that is responsible for rendering the hidden links.
[
{ _label: 'Navigation', _href: '#nav' },
{ _label: 'Inhalt', _href: '#main' },
{ _label: 'Kontakt', _href: '#kontakt' },
{ _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
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 | undefined>
Sets focus on the internal element.
Returns
Type: Promise<void | undefined>