@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.
61 lines (42 loc) • 3.6 kB
Markdown
# Breadcrumbs
To implement 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 into your project you can use it simply like:
```jsx
<Breadcrumbs>
<BreadcrumbsItem href="https://kiwi.com">Kiwi.com</BreadcrumbsItem>
</Breadcrumbs>
```
## Props
Table below contains all types of the props available in Breadcrumbs component.
| Name | Type | Default | Description |
| :----------- | :------------------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dataTest | `string` | | Optional prop for testing purposes. |
| **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 | `Translation` | `"Back"` | Property for passing translation string when you want to use the `onGoBack` callback. |
| 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 stronger `font-weight` automatically. Also, all meta information are automatically render 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
Table below contains all types of the 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. |