Breadcrumbs
Hierarchical navigation trail that renders the path of pages leading to the current view. Each item can be a link (`href` or `onClick`) or plain text; the la…
Hierarchical navigation trail that renders the path of pages leading to the current view. Each item can be a link (href or onClick) or plain text; the last item is rendered as the current page. Pass showBack to prepend a "back" affordance for mobile/touch layouts. The separator between items is customisable via separator (defaults to a chevron).
import { Breadcrumbs } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
items | Required | BreadcrumbItem[] | — | — |
showBack | Optional | boolean | undefined | — | — |
backLabel | Optional | string | undefined | — | — |
className | Optional | string | undefined | — | — |
itemClassName | Optional | string | undefined | — | — |
backClassName | Optional | string | undefined | — | — |
onBackClick | Optional | VoidFunction | undefined | — | — |
separator | Optional | React.ReactNode | — | — |
Usage
Horizontal breadcrumb navigation. Renders an ordered trail of links / buttons / plain labels with an optional "Back" button on the left.
Notes
- The last item is rendered as the current page (
aria-current="page"). - Items without
hreforonClickrender as plain text.
Example
/** * Runnable example for Breadcrumbs. */import { Breadcrumbs } from '@tetherto/mdk-react-devkit'export const BreadcrumbsExample = () => ( <Breadcrumbs showBack onBackClick={() => undefined} items={[ { label: 'Dashboard', href: '/' }, { label: 'Devices', onClick: () => undefined }, { label: 'Miner #42' }, ]} />)