Breadcrumbs
Navigation breadcrumb trail showing page hierarchy.
Examples
Simple
Two-level breadcrumb: home and current page.
Deep path
Four-level hierarchy representing a nested navigation structure.
Custom separator
Replaces the default / with a chevron using a wrapper.
Truncated
Long paths collapse the middle segment with an ellipsis.
With Dropdown
Collapsed breadcrumb items with ellipsis.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Breadcrumbs } from "@rokle/components";import { Breadcrumbs } from "@rokle/components";
export function Example() {
return <Breadcrumbs />;
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; href?: string }[] | - | Breadcrumb items. Last item has no href. |