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

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

# Breadcrumb 面包屑

展示当前页面在导航层级中的位置。

## 基础用法


1. [首页](#基础用法)
1. [项目](#基础用法)
1. Leaf Garden

1. [首页](#基础用法)
1. /[项目](#基础用法)
1. /Leaf Garden

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/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: '首页', href: '#基础用法', icon: <House size={14} /> },
  { title: '项目', href: '#基础用法' },
  { title: 'Leaf Garden' },
];

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

展开代码

## 折叠长路径


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

capabilities.tsx

复制代码

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

export function Capabilities() {
  return (
    <Breadcrumb
      aria-label={'折叠后的项目路径'}
      maxItems={3}
      items={[
        { title: 'Home', href: '#home' },
        { title: 'Workspace', href: '#workspace' },
        { title: 'Projects', href: '#projects' },
        { title: 'Leaf UI', href: '#leaf' },
        { title: 'Tokens' },
      ]}
    />
  );
}
```

展开代码

## Breadcrumb API

| 属性                    | 类型                                                                          | 默认值          | 说明            |
| --------------------- | --------------------------------------------------------------------------- | ------------ | ------------- |
| `items`               | `readonly `[`BreadcrumbItem`](#breadcrumbitem)`[]`                          | 必填           | 必需。路径列表       |
| `separator`           | `ReactNode`                                                                 | ChevronRight | 分隔内容          |
| `maxItems`            | `number`                                                                    | —            | 路径折叠前最多展示的项数。 |
| `itemsBeforeCollapse` | `number`                                                                    | `1`          | 折叠后保留的起始项数。   |
| `itemsAfterCollapse`  | `number`                                                                    | `1`          | 折叠后保留的末尾项数。   |
| `itemRender`          | `(item: `[`BreadcrumbItem`](#breadcrumbitem)`, index: number) => ReactNode` | —            | 自定义条目内容。      |
| `aria-label`          | `string`                                                                    | 语言默认值        | 导航名称          |

## BreadcrumbItem

| 属性       | 类型                                                                                                             | 默认值 | 说明                    |
| -------- | -------------------------------------------------------------------------------------------------------------- | --- | --------------------- |
| `key`    | `string`                                                                                                       | —   | 稳定标识                  |
| `title`  | `ReactNode`                                                                                                    | 必填  | 必需。页面名称               |
| `icon`   | `ReactNode`                                                                                                    | —   | 前置图标                  |
| `menu`   | `readonly `[`DropdownItem`](https://ifhover.github.io/leaf-ui/v/0.6.0/components/dropdown.md#dropdownitem)`[]` | —   | 该路径项的下拉菜单。            |
| `href`   | `string`                                                                                                       | —   | 链接目标。                 |
| `target` | `string`                                                                                                       | —   | 目标的选择器或返回元素的函数；省略时居中。 |

## 类型

定义组件属性或组装列表时可导入相关类型。

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

## 使用说明

最后一项标记为当前页面。BreadcrumbItem 继承原生链接属性，可通过 title 传入路由框架的 Link；没有 href 时不会生成多余的链接。