---
title: Breadcrumb - 面包屑
order: 0
path:
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 5
  title: 导航
  path: /nav
---

显示当前页面在系统层级结构的位置，并能返

## 基础面包屑

适用于广泛的基础用法，系统拥有超过两级以上的层级结构，用于切换向上任意层级的内容。

<code src="./demos/basis.tsx" />

## 带图标的面包屑

可自定义每项内容，统一图标加文字，图标放在文字前面。

<code src="./demos/withIcon.tsx" />

## 自定义分隔符的面包屑

自定义分隔符，也可用图标

<code src="./demos/separator.tsx" />

## 带下拉菜单的面包屑

面包屑支持下拉菜单。

<code src="./demos/dropDown.tsx" />

显示省略：

<code src="./demos/overlay.tsx" />

## API

### Breadcrumb

| 参数       | 说明                                     | 类型                                        | 默认值 |
| ---------- | ---------------------------------------- | ------------------------------------------- | ------ |
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | -      |
| params     | 路由的参数                               | object                                      | -      |
| routes     | router 的路由栈信息                      | [routes\[\]](#routes)                       | -      |
| separator  | 分隔符自定义                             | ReactNode                                   | `/`    |

### Breadcrumb.Item

| 参数           | 说明                     | 类型                                   | 默认值 |
| -------------- | ------------------------ | -------------------------------------- | ------ |
| iconName       | 使用图标                 | string                                 | -      |
| className      | 自定义类名               | string                                 | -      |
| dropDownConfig | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown)       | -      |
| href           | 链接的目的地             | string                                 | -      |
| overlay        | 下拉菜单的内容           | [Menu](/components/menu) \| () => Menu | -      |
| onClick        | 单击事件                 | (e:MouseEvent) => void                 | -      |
| maxLength      | 标题最长的长度           | number                                 | 10     |

### Breadcrumb.Separator

| 参数     | 说明           | 类型      | 默认值 |
| -------- | -------------- | --------- | ------ |
| children | 要显示的分隔符 | ReactNode | `/`    |

> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。

### routes

```ts
interface Route {
  path: string;
  breadcrumbName: string;
  children: Array<{
    path: string;
    breadcrumbName: string;
  }>;
}
```