SkipNavigation
Enables users to skip from the top of the page directly to primary actions.
GuidelinesReact
To implement SkipNavigation component into your project you’ll need to add the import:
import SkipNavigation from "@kiwicom/orbit-components/lib/SkipNavigation";
After adding import into your project you can use it simply like:
<SkipNavigation /><Heading dataA11ySection="section-id-to-scrape">
Table below contains all types of the props available in the SkipNavigation component.
| Name | Type | Description |
|---|---|---|
| feedbackUrl | string | Url to a feeedback form. |
| actions | Actions[] | An array specifying common actions on a page |
Table below contains all types of the props available for Actions array.
| Name | Type | Description |
|---|---|---|
| name | string | Name of a action. |
| link | string | A href for linking to another page. |
| onClick | () => void \| Promise | Callback for handling action. |
- SkipNavigation
onFocusscrapes the webpage looking for custom attributedataA11ySectionto create quick page links. You can extend<Heading>and<CardHeader>to containdataA11ySection. It’s important to note that without these attributes on a page, SkipNavigation won’t work.
SkipNavigation is used to adress WCAG2.0 Criterion 2.4.1. The intent of this is to allow people who navigate sequentially through content more direct access to the primary content and common actions of the Web page.