Developer mode
Opens components on the React tab by default.
Your bookmarks

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>

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.