To implement Button component into your project you’ll need to add the import:
import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
After adding import into your project you can use it simply like:
<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 . |
|
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 |
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
import BreadcrumbsItem from "@kiwicom/orbit-components/lib/Breadcrumbs/BreadcrumbsItem";
Usage:
<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. |