<Breadcrumbs>
<Breadcrumbs.Link icon={<HouseIcon size={16} />} href="/">
Home
</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Link href="/docs">Projects</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Current>Current Project</Breadcrumbs.Current>
</Breadcrumbs>Installation
import { Breadcrumbs } from "@cloudflare/kumo";Usage
import { Breadcrumbs } from "@cloudflare/kumo";
export default function Example() {
return (
<Breadcrumbs>
<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
</Breadcrumbs>
);
}Examples
Basic
<Breadcrumbs>
<Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
</Breadcrumbs>Loading
<Breadcrumbs>
<Breadcrumbs.Link href="#" icon={<HouseIcon size={16} />}>
Home
</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Current loading></Breadcrumbs.Current>
</Breadcrumbs>Root
<Breadcrumbs>
<Breadcrumbs.Current icon={<HouseIcon size={16} />}>
Worker Analytics
</Breadcrumbs.Current>
</Breadcrumbs>Clipboard
<Breadcrumbs>
<Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
<Breadcrumbs.Clipboard text="#" />
</Breadcrumbs>API Reference
Breadcrumbs
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "base" | "base" | Size of the breadcrumbs. - `"sm"` — Compact breadcrumbs for dense UIs - `"base"` — Default breadcrumbs size |
| children | ReactNode | - | - |
| className | string | - | Additional CSS classes merged via `cn()`. |
Breadcrumbs.Link
| Prop | Type | Default |
|---|---|---|
| href* | string | - |
| icon | React.ReactNode | - |
Breadcrumbs.Current
| Prop | Type | Default |
|---|---|---|
| loading | boolean | - |
| icon | React.ReactNode | - |
Breadcrumbs.Separator
| Prop | Type | Default |
|---|
No component-specific props. Accepts standard HTML attributes.
Breadcrumbs.Clipboard
| Prop | Type | Default |
|---|---|---|
| text* | string | - |