Breadcrumbs 面包屑

Breadcrumbs 用来表达当前位置、可回退层级和相邻页面的快速切换。

推荐 items支持 itemRender支持 menu展示 children

默认分隔符继续保持 Rue 当前的箭头视觉，不改成斜杠样式。
推荐使用 items：可组合 title、label、path、params、current、menu 和独立 separator item。
children 与 Breadcrumbs.Item 仍然提供，适合在设计稿里手工控制单个节点。

# 基础组合

Home
Documents
Add Document

# 组合模式带图标

Workspace
Assets
Hero Banner

# 从 items 渲染

Home
Documents
Breadcrumbs

# path、params 与 itemRender

itemRender 会拿到当前 route、params、完整 routes、当前 paths 和解析后的 href。

# 自定义 separator 与快捷菜单

Control Center
· Content
v
- Overview
- Drafts
- Scheduled
Breadcrumbs

# 超长路径滚动

Workspace / Growth / Launch / Sprint 03
Assets / Homepage / Experiment
Hero Banner / Copy Review

# API

items 是推荐入口；Breadcrumbs.Item 更适合展示基础手工结构时逐步接入。

Breadcrumbs

属性	说明	类型	默认值
`children`	提供组合式写法，适合手工控制节点结构	`any`	`-`
`className`	附加到根节点的类名	`string`	`-`
`dropdownIcon`	items 模式下菜单触发器的自定义图标	`any`	`Rue arrow`
`itemRender`	自定义 items 模式下每一项的渲染结果	`(route, params, routes, paths, href) => any`	`-`
`items`	推荐入口，支持 title/label、path、menu、separator item	`ReadonlyArray<BreadcrumbsDataItem>`	`-`
`params`	用于替换 path 中的 :param 占位符	`Record<string, string \| number \| boolean \| null \| undefined>`	`{}`
`routes`	items 的别名，能力一致	`ReadonlyArray<BreadcrumbsDataItem>`	`-`
`separator`	items 模式的全局分隔符，默认保持 Rue 的箭头风格	`any`	`Rue arrow`

BreadcrumbsDataItem / separator item

属性	说明	类型	默认值
`className`	应用到当前 li 的类名	`string`	`-`
`current`	标记当前项，默认渲染为文本并附带 aria-current	`boolean`	`false`
`disabled`	禁用当前项的交互	`boolean`	`false`
`href`	直接指定链接地址	`string`	`-`
`icon`	前置图标	`any`	`-`
`label / title`	显示内容，title 为推荐字段，label 支持基础写法	`any`	`-`
`linkClassName`	应用到当前链接或文本节点的类名	`string`	`-`
`menu`	快捷切换菜单，内部复用 Rue Dropdown	`{ items?: ReadonlyArray<BreadcrumbsMenuItem> }`	`-`
`onClick`	点击事件；无 href 时会渲染为 button	`(event: MouseEvent) => void`	`-`
`path`	按层级拼接路径，适合和 params、itemRender 一起用	`string`	`-`
`type`	当值为 separator 时，这一项会作为独立分隔符配置	`separator`	`-`

Breadcrumbs.Item

属性	说明	类型	默认值
`children`	手工传入内容，整合基础示例的组织方式	`any`	`-`
`current`	将该项渲染为当前项文本	`boolean`	`false`
`href`	组合模式下直接输出链接	`string`	`-`
`icon`	组合模式下的前置图标	`any`	`-`
`linkClassName`	应用到链接、文本或按钮节点	`string`	`-`
`menu`	为当前项附加一个快捷菜单	`{ items?: ReadonlyArray<BreadcrumbsMenuItem> }`	`-`