Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Overview
The Breadcrumb component provides hierarchical navigation that shows users their current location within a website or application structure. It offers support for links, icons, custom separators, and menu-backed overflow composition while leaving path data and routing with the consumer.
Usage
import {
Breadcrumb,
BreadcrumbIcon,
BreadcrumbItem,
BreadcrumbLabel,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbOverflowItem,
BreadcrumbOverflowMenu,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/breadcrumb";<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Examples
Basic
A simple breadcrumb with links and the current page.
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/breadcrumb";
export default function Component() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/" />}>Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}With Icon
Use icons as breadcrumb links, such as a home icon for the root page.
import {
Breadcrumb,
BreadcrumbIcon,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/breadcrumb";
import {
House } from "@tilt-legal/cubitt-icons/ui/outline";
export default function Component() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">
<BreadcrumbIcon>
<House />
</BreadcrumbIcon>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}Overflow Menu
Use BreadcrumbOverflowMenu when collapsed path items should be selectable. It owns the menu shell and trigger styling while the consumer composes the menu items and decides what each hidden folder does.
import {
Breadcrumb,
BreadcrumbIcon,
BreadcrumbItem,
BreadcrumbLabel,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbOverflowItem,
BreadcrumbOverflowMenu,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/breadcrumb";
import { Folder } from "@tilt-legal/cubitt-icons/ui/outline";
const hiddenFolders = [
{ id: "matter-intake", label: "Matter intake" },
{ id: "evidence-review", label: "Evidence review" },
];
export default function Component() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Files</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbOverflowMenu>
{hiddenFolders.map((folder) => (
<BreadcrumbOverflowItem key={folder.id}>
<Folder />
{folder.label}
</BreadcrumbOverflowItem>
))}
</BreadcrumbOverflowMenu>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/">
<BreadcrumbIcon>
<Folder />
</BreadcrumbIcon>
<BreadcrumbLabel>Disclosure</BreadcrumbLabel>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>
<BreadcrumbIcon>
<Folder />
</BreadcrumbIcon>
<BreadcrumbLabel>Closing Set</BreadcrumbLabel>
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}Custom Separator
Customize the separator between breadcrumb items.
import {
Breadcrumb,
BreadcrumbIcon,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/breadcrumb";
import { House } from "@tilt-legal/cubitt-icons/ui/outline";
export default function Component() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">
<BreadcrumbIcon>
<House />
</BreadcrumbIcon>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<div className="mx-1 rounded-full size-1 bg-zinc-400 dark:bg-zinc-600" />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink href="/">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<div className="mx-1 rounded-full size-1 bg-zinc-400 dark:bg-zinc-600" />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}API Reference
Breadcrumb
The root breadcrumb component. Renders a nav element with aria-label="breadcrumb".
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply |
Extends all standard HTML nav element props.
BreadcrumbList
Container for breadcrumb items. Renders an ol element.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply |
Extends all standard HTML ol element props.
BreadcrumbItem
Individual breadcrumb item container. Renders a li element.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply |
Extends all standard HTML li element props.
BreadcrumbLink
Breadcrumb link component. Renders an a element by default.
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement | - | Custom element to render as the link |
href | string | - | Link destination |
className | string | - | Additional CSS classes to apply |
Extends all standard HTML a element props.
BreadcrumbIcon
Inline icon slot for links, pages, and overflow triggers.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply |
Extends all standard HTML span element props.
BreadcrumbLabel
Truncating label slot for icon-and-label breadcrumb content.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply |
Extends all standard HTML span element props.
BreadcrumbOverflowMenu
Menu shell for collapsed path segments. It renders the overflow trigger and menu content while leaving each menu item composed by the consumer.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Menu item composition. |
triggerProps | object | - | Props passed to BreadcrumbOverflowTrigger. |
contentProps | object | - | Props passed to the internal menu content. |
Also accepts primitive Menu props.
BreadcrumbOverflowItem
Menu item wrapper for BreadcrumbOverflowMenu.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply |
Also accepts primitive MenuItem props.
BreadcrumbOverflowTrigger
Low-level trigger for collapsed path segments. BreadcrumbOverflowMenu uses this by default.
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement | - | Custom element to render as the trigger |
icon | ReactNode | <FolderDots /> | Leading icon. Pass null to hide it. |
showChevron | boolean | true | Shows the trailing chevron. |
chevron | ReactNode | <ChevronDown /> | Custom trailing indicator. |
className | string | - | Additional CSS classes to apply |
Extends all standard HTML button element props.
BreadcrumbPage
Represents the current page in the breadcrumb. Renders a span element with aria-current="page".
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply |
Extends all standard HTML span element props.
BreadcrumbSeparator
Visual separator between breadcrumb items. Renders a li element with role="presentation".
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | ChevronRight | Custom separator content |
className | string | - | Additional CSS classes to apply |
Extends all standard HTML li element props. By default, renders a ChevronRight icon that rotates in RTL layouts.
BreadcrumbEllipsis
Presentational ellipsis for collapsed breadcrumbs when no menu trigger is needed.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Dots | Custom ellipsis content |
className | string | - | Additional CSS classes to apply |
Extends all standard HTML span element props.