# SkipNavigation
To implement SkipNavigation component into your project you'll need to add the import:
```jsx
import SkipNavigation from "@kiwicom/orbit-components/lib/SkipNavigation";
```


After adding import into your project you can use it simply like:
```jsx
<SkipNavigation />

<Heading dataA11ySection="section-id-to-scrape">
```

## Props
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[]`](#actions)  | An array specifying common actions on a page    
  
## actions
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.
  
## Functional specs
* SkipNavigation `onFocus` scrapes the webpage looking for custom attribute `dataA11ySection` to create quick page links. You can extend `<Heading>` and `<CardHeader>` to contain `dataA11ySection`. It's important to note that **without these attributes on a page, SkipNavigation won't work**.

## Rationale
SkipNavigation is used to adress [WCAG2.0 Criterion 2.4.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html).
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.