Breadcrumbs / React

Shows where the user is within the app hierarchy.

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>

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

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.

Breadcrumbs requires one subcomponent – BreadcrumbsItem.

import BreadcrumbsItem from "@kiwicom/orbit-components/lib/Breadcrumbs/BreadcrumbsItem";

<BreadcrumbsItem href="https://kiwi.com">Kiwi.com</BreadcrumbsItem>

Table below contains all types of the props available in BreadcrumbsItem component.

Name	Type	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.