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