Breadcrumbs

Breadcrumbs

import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
<Breadcrumbs>
<BreadcrumbsItem href="https://kiwi.com">Kiwi.com</BreadcrumbsItem>
</Breadcrumbs>

Props

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
idstringSet id for Breadcrumbs
childrenReact.NodeThe content of the Breadcrumbs, normally BreadcrumbsItem.
onGoBackevent => void \| PromiseCallback for handling back button action. If present the back button is visible.
backHrefstringThe location for the back button to direct to. Turns the back button into a link when present (renders as an a element).
goBackTitleReact.Node"Back"Translation string for the go back link on mobile, defined when onGoBack is defined.
spaceAfterenumAdditional 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

BreadcrumbsItem

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

Usage:

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

Props

NameTypeDefaultDescription
childrenstringThe content of the BreadcrumbsItem.
dataTeststringOptional prop for testing purposes.
hrefstringThe URL to link when the BreadcrumbsItem is clicked.
idstringHTML id attribute for BreadcrumbsItem.
onClickevent => void \| PromiseFunction for handling the onClick event.
componentstring \| React.Elementa or buttonAllows to customize the element to be rendered.