@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
73 lines (52 loc) • 4.19 kB
Markdown
# NavigationList
To implement NavigationList component into your project you'll need to add the import:
```jsx
import NavigationList, { NavigationListItem } from "@kiwicom/orbit-components/lib/NavigationList";
```
After adding import into your project you can use it simply like:
```jsx
<NavigationList>
<NavigationListItem>About us</NavigationListItem>
<NavigationListItem>Careers</NavigationListItem>
</NavigationList>
```
## Props
Table below contains all types of the props available in the NavigationList component.
| Name | Type | Default | Description |
| :----------- | :-------------- | :------------- | :-------------------------------------------------------------------------- |
| **children** | `React.Node` | | The content of the NavigationList. |
| dataTest | `string` | | Optional prop for testing purposes. |
| title | `Translation` | | Additional title of the NavigationList that will appear above its children. |
| type | [`enum`](#enum) | `"navigation"` | Visual type of the NavigationList. |
### enum
| position |
| :------------- |
| `"navigation"` |
| `"inline"` |
## Subcomponents
### NavigationListItem
```jsx
import NavigationListItem from "@kiwicom/orbit-components/lib/NavigationListItem";
```
After adding import into your project you can use it simply like:
```jsx
<NavigationListItem>About us</NavigationListItem>
```
## Props
Table below contains all types of the props available in the NavigationListItem component.
| Name | Type | Default | Description |
| :---------- | :---------------------- | :--------- | :-------------------------------------------------------------------------------------------------------- |
| ariaLabel | `string` | | Adds prop adds `aria-label` to an element, useful for screen readers. |
| asComponent | `() => React.Element` | `"button"` | The component used for the root node. |
| children | `React.Node` | | The content of the NavigationLink. |
| dataTest | `string` | | Optional prop for testing purposes. |
| external | `boolean` | | If `true`, the Navigation opens link in a new tab. [See Functional specs](#functional-specs) |
| href | `string` | | The URL of the link to open when the NavigationLink is clicked. [See Functional specs](#functional-specs) |
| icon | `React$Element` | | The displayed icon on the left. |
| onClick | `() => void \| Promise` | | Function for handling onClick event. |
| selectable | `boolean` | `false` | If `true`, the NavigationLink will be selectable and it will be possible to use `selected` property. |
| selected | `boolean` | | If `true`, the NavigationLink will be selected visually. |
| tabIndex | `string` | | Specifies the tab order of an element. |
## Functional specs
- When the `external` is specified, `noopener` and `noreferrer` values will automatically added to attribute `rel` for security reason.
- By passing the `href` prop into NavigationListItem, it will render into `a` element. If you pass `component` prop it will override this logic.