## Overview [#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 [#usage]
```tsx
import {
Breadcrumb,
BreadcrumbIcon,
BreadcrumbItem,
BreadcrumbLabel,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbOverflowItem,
BreadcrumbOverflowMenu,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/breadcrumb";
```
```tsx
Home
Components
Breadcrumb
```
***
## Examples [#examples]
### Basic [#basic]
A simple breadcrumb with links and the current page.
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/breadcrumb";
export default function Component() {
return (
Home
}>Components
Breadcrumb
);
}
```
### With Icon [#with-icon]
Use icons as breadcrumb links, such as a home icon for the root page.
```tsx
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 (
Components
Breadcrumb
);
}
```
### Overflow Menu [#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.
```tsx
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 (
Files
{hiddenFolders.map((folder) => (
{folder.label}
))}
Disclosure
Closing Set
);
}
```
### Custom Separator [#custom-separator]
Customize the separator between breadcrumb items.
```tsx
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 (
Components
Breadcrumb
);
}
```
***
## API Reference [#api-reference]
### Breadcrumb [#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 [#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 [#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 [#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 [#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 [#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 [#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 [#breadcrumboverflowitem]
Menu item wrapper for `BreadcrumbOverflowMenu`.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ------------------------------- |
| `className` | `string` | - | Additional CSS classes to apply |
Also accepts primitive `MenuItem` props.
### BreadcrumbOverflowTrigger [#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` | `` | Leading icon. Pass `null` to hide it. |
| `showChevron` | `boolean` | `true` | Shows the trailing chevron. |
| `chevron` | `ReactNode` | `` | Custom trailing indicator. |
| `className` | `string` | - | Additional CSS classes to apply |
Extends all standard HTML `button` element props.
### BreadcrumbPage [#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 [#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 [#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.