@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.
64 lines (45 loc) • 4.02 kB
Markdown
# Breadcrumbs
To implement the Button component into your project you'll need to add the import:
```jsx
import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
```
After adding import in your project you can use it simply like:
```jsx
<Breadcrumbs>
<BreadcrumbsItem href="https://kiwi.com">Kiwi.com</BreadcrumbsItem>
</Breadcrumbs>
```
## Props
The Table below contains all types of props available in the Breadcrumbs component.
| Name | Type | Default | Description |
| :----------- | :------------------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dataTest | `string` | | Optional prop for testing purposes. |
| id | `string` | | Set `id` for `Breadcrumbs` |
| **children** | `React.Node` | | The content of the Breadcrumbs, normally [`BreadcrumbsItem`](#breadcrumbsitem). |
| onGoBack | `event => void \| Promise` | | Callback for handling back button action. If present the back button is visible. |
| backHref | `string` | | The location for the back button to direct to. Turns the back button into a link when present (renders as an `a` element). |
| goBackTitle | `React.Node` | `"Back"` | Translation string for the go back link on mobile, defined when onGoBack is defined. |
| |
| spaceAfter | `enum` | | Additional `margin-bottom` after component. [See spacing docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) |
## Functional specs
- The last BreadcrumbsItem will have the stronger `font-weight` automatically. Also, all meta-information is automatically rendered too, so you don't have to specify it explicitly.
## Subcomponents
Breadcrumbs requires one subcomponent - BreadcrumbsItem.
### BreadcrumbsItem
```jsx
import BreadcrumbsItem from "@kiwicom/orbit-components/lib/Breadcrumbs/BreadcrumbsItem";
```
#### Usage:
```jsx
<BreadcrumbsItem href="https://kiwi.com">Kiwi.com</BreadcrumbsItem>
```
#### Props
The Table below contains all types of props available in BreadcrumbsItem component.
| Name | Type | Default | Description |
| :----------- | :------------------------- | :-------------- | :--------------------------------------------------- |
| **children** | `string` | | The content of the BreadcrumbsItem. |
| dataTest | `string` | | Optional prop for testing purposes. |
| **href** | `string` | | The URL to link when the BreadcrumbsItem is clicked. |
| id | `string` | | HTML `id` attribute for BreadcrumbsItem. |
| onClick | `event => void \| Promise` | | Function for handling the onClick event. |
| component | `string \| React.Element` | `a` or `button` | Allows to customize the element to be rendered. |