# 面包屑 Breadcrumb

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/breadcrumb
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

面包屑是辅助导航模式，用于识别页面在层次结构内的位置，并根据需要向上返回。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：适用于广泛基本用法。分隔方式分为图标分隔及斜线分隔两种方式，可根据不同场景使用。
- **自定义分隔符**：自定义分隔符。
- **自定义尺寸**：通过指定样式来自定义各种面包屑的尺寸。
- **自定义图标**：可以在内容中使用自定义图标
- **带有下拉菜单**：通过 `droplist` 或者 `routes` 来指定下拉菜单。
- **显示省略**：通过 `maxCount` 来指定最多渲染的面包屑数量，超出的部分将显示为省略号。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Breadcrumb

|参数名|描述|类型|默认值|
|---|---|---|---|
|maxCount|最多渲染的面包屑数量|number |`-`|
|separator|指定分割符|string \| ReactNode |`<IconObliqueLine />`|
|className|节点类名|string \| string[] |`-`|
|routes|直接设置下拉菜单|[RouteProps](#routeprops)[] |`-`|
|style|节点样式|CSSProperties |`-`|
|itemRender|routes 时生效，自定义渲染面包屑|(route: [RouteProps](#routeprops), routes: [RouteProps](#routeprops)[], paths: string[]) => ReactNode |`-`|

### Breadcrumb.Item

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|href|超链接地址|string |`-`|2.40.0|
|droplist|下拉菜单的内容，等同于下拉菜单组件的 droplist 属性|[DropdownProps](dropdown#dropdown)['droplist'] |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|dropdownProps|下拉菜单的属性 [DropdownProps](/react/components/dropdown)|[DropdownProps](dropdown#dropdown) |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|tagName|标签名，可以是 html 标签或是组件|string \| React.FC&lt;any&gt; \| React.ComponentClass&lt;any&gt; |`div`|2.40.0|
|onClick|点击回调|(e: any) => void |`-`|2.40.0|

### RouteProps

```js
export interface RouteProps {
  path: string;
  breadcrumbName: string;
  children?: Array<{
    path: string;
    breadcrumbName: string;
  }>;
}
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt