面包屑 Breadcrumb — Arco Design v2.66.18 文档

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

安装

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

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

Breadcrumb.Item

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

RouteProps

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