> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/breadcrumb.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Breadcrumb

Show the current page within a navigation hierarchy.

## Basic usage


1. [Home](#basic-usage)
1. [Projects](#basic-usage)
1. Leaf Garden

1. [Home](#basic-usage)
1. /[Projects](#basic-usage)
1. /Leaf Garden

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/breadcrumb/basic.tsx"
import type { BreadcrumbItem } from '@ifhover/leaf-ui';

import { Breadcrumb, Space } from '@ifhover/leaf-ui';

import { House } from 'lucide-react';

const items: readonly BreadcrumbItem[] = [
  { title: 'Home', href: '#basic-usage', icon: <House size={14} /> },
  { title: 'Projects', href: '#basic-usage' },
  { title: 'Leaf Garden' },
];

export function BreadcrumbBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Breadcrumb items={items} />
      <Breadcrumb items={items} separator="/" />
    </Space>
  );
}
```

Expand code

## Collapse long paths


1. [Home](#home)
1. 
1. Tokens

capabilities.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/breadcrumb/capabilities.tsx"
import { Breadcrumb } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Breadcrumb
      aria-label={'Collapsed project path'}
      maxItems={3}
      items={[
        { title: 'Home', href: '#home' },
        { title: 'Workspace', href: '#workspace' },
        { title: 'Projects', href: '#projects' },
        { title: 'Leaf UI', href: '#leaf' },
        { title: 'Tokens' },
      ]}
    />
  );
}
```

Expand code

## Breadcrumb API

| Property              | Type                                                                        | Default        | Description                             |
| --------------------- | --------------------------------------------------------------------------- | -------------- | --------------------------------------- |
| `items`               | `readonly `[`BreadcrumbItem`](#breadcrumbitem)`[]`                          | Required       | Required. Path items                    |
| `separator`           | `ReactNode`                                                                 | ChevronRight   | Separator                               |
| `maxItems`            | `number`                                                                    | —              | Maximum items before collapsing a path. |
| `itemsBeforeCollapse` | `number`                                                                    | `1`            | Leading items retained after collapse.  |
| `itemsAfterCollapse`  | `number`                                                                    | `1`            | Trailing items retained after collapse. |
| `itemRender`          | `(item: `[`BreadcrumbItem`](#breadcrumbitem)`, index: number) => ReactNode` | —              | Customize item content.                 |
| `aria-label`          | `string`                                                                    | Locale default | Navigation label                        |

## BreadcrumbItem

| Property | Type                                                                                                              | Default  | Description                                                 |
| -------- | ----------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------- |
| `key`    | `string`                                                                                                          | —        | Stable identifier                                           |
| `title`  | `ReactNode`                                                                                                       | Required | Required. Page title                                        |
| `icon`   | `ReactNode`                                                                                                       | —        | Leading icon                                                |
| `menu`   | `readonly `[`DropdownItem`](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/dropdown.md#dropdownitem)`[]` | —        | Dropdown items for a breadcrumb.                            |
| `href`   | `string`                                                                                                          | —        | Link destination.                                           |
| `target` | `string`                                                                                                          | —        | Target selector or element getter; omit to center the step. |

## Types

Import the component props and item types when preparing your own values.

```ts
import type { BreadcrumbProps, BreadcrumbItem } from '@ifhover/leaf-ui';
```

## Usage notes

The final item is marked as the current page. BreadcrumbItem accepts native anchor attributes. A router Link can be passed as title; omitting href avoids an additional anchor.