Breadcrumb

面包屑（Breadcrumb）用于展示当前页面在信息架构中的位置，帮助用户理解路径并快速返回上级页面。

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItemContent,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbRoot,
  BreadcrumbSeparator
} from '@skyroc/web-ui';

架构说明

Breadcrumb 是数据驱动组件，主组件接收 items 并自动渲染根导航、列表、条目、链接、当前页和分隔符。

• BreadcrumbRoot：语义化 nav 容器，默认带 aria-label="breadcrumb"。
• BreadcrumbList：有序列表容器。
• BreadcrumbItemContent：单个路径节点容器。
• BreadcrumbLink：可点击链接；当 item 有 href 时使用。
• BreadcrumbPage：当前页展示；当 item 没有 href 时使用。
• BreadcrumbEllipsis：折叠路径项的省略入口，可配合 DropdownMenu 展示隐藏项。

何时使用

• 页面存在明确层级路径，需要告诉用户当前位置。
• 用户需要从详情页、设置页或深层页面快速返回上级。
• 路径较长时需要折叠中间层级，并通过下拉菜单访问隐藏项。
• 需要在路径节点中加入图标、状态标签或自定义渲染内容。

基础用法

通过 items 传入路径数据。没有 href 的节点会渲染为当前页样式；有 href 的节点会渲染为链接。

自定义条目

通过 renderItem 自定义每个路径节点的渲染内容，适合接入路由组件或复杂节点。

自定义分隔符

通过 separator 替换默认的右箭头分隔符。

链接

当 item 中包含 href 时，组件会使用 BreadcrumbLink 渲染该节点。

折叠

设置 ellipsis 后，当条目数量大于 4 时，组件会折叠中间项，并用 DropdownMenu 展示被折叠的路径。

自定义折叠

通过 ellipsisIcon 替换省略图标；通过 renderEllipsis 可以完全自定义折叠入口。

下拉条目

通过 renderItem 结合 DropdownMenu，可以让某个路径节点本身成为下拉入口。

尺寸

通过 size 控制整体字号和间距，从 xs 到 2xl 共 6 个尺寸。

自定义样式

通过 classNames 控制 root、list、item、separator、ellipsis 等 slot。主组件的 classNames 不包含 link 和 page，这两个 slot 通过 linkProps 和 pageProps 单独传入。

API

Breadcrumb

通用属性参考：根容器基于 nav 元素，支持原生 nav 属性、size 和 className。

子组件

类型