## Overview [#overview]
The **Breadcrumb** component provides hierarchical navigation that shows users their current location within a website or application structure. Built on Base UI primitives, it offers support for links, custom separators, and flexible composition.
## Usage [#usage]
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/primitives";
```
```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/primitives";
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,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/primitives";
import {
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/primitives";
import {
House } from "@tilt-legal/cubitt-icons/ui/outline";
export default function Component() {
return (
Components
Breadcrumb
);
}
```
### Custom Separator [#custom-separator]
Customize the separator between breadcrumb items.
```tsx
import { Breadcrumb } from "@tilt-legal/cubitt-components/primitives";
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.
### 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.