Breadcrumb 面包屑

用于显示当前页面路径，并能快速返回到历史页面。

获取组件

MainIndividual
import { Breadcrumb } from 'rsuite';

演示

默认

面包屑导航的基本示例。

尺寸

面包屑提供不同的尺寸以满足您的设计需求。

图标

为面包屑项添加图标，提供更直观的视觉提示。

背景色

添加背景色使面包屑在页面上更加突出。

自定义分隔符

用自定义元素或图标替换默认分隔符。

自动折叠

如果项目超过 5 个，会自动折叠。可以使用 maxItems 属性设置要显示的面包屑的最大数量。

下拉菜单

将下拉菜单与面包屑项集成，提供额外的导航选项。

路由

Breadcrumb.Item 组件可通过 as 属性与其他路由库（如 Next.js、React Router）结合使用。详见组合指南。

无障碍设计

WAI-ARIA:https://www.w3.org/TR/wai-aria-practices/#breadcrumb

  • <Breadcrumb> 导航默认被包含在一个 nav 元素中。
  • 务必在 <Breadcrumb>导航组件上加上 aria-label 的描述。
  • 如果最后一个链接是可交互的，请将 aria-current 设置为 page。
<Breadcrumb aria-label="breadcrumb">
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item aria-current="page" href="/components/breadcrumb">
    Breadcrumb
  </Breadcrumb.Item>
</Breadcrumb>

Props

<Breadcrumb>

属性名称 类型 (默认值) 描述
as ElementType ('nav') 为组件自定义元素类型
classPrefix string ('breadcrumb') 组件 CSS 类的前缀
locale BreadcrumbLocaleType 本地化设置，用于显示组件文本的语言
maxItems number (5) 设置要显示的面包屑的最大数量，超过后会自动折叠
onExpand (event: MouseEvent) => void 折叠视图中点击省略号时的回调函数
separator ReactNode ('/') 自定义面包屑项之间的分隔符
size 'sm' | 'md' | 'lg' | number | string ('md') 设置面包屑项的大小

<Breadcrumb.Item>

属性名称 类型 (默认值) 描述
active boolean 指示面包屑项是否处于激活状态
as ElementType ('a') 自定义元素类型。默认为 'span'，设置 'href' 时默认为 'a'
classPrefix string ('breadcrumb-item') 组件 CSS 类的前缀
href string 当提供时，将面包屑项渲染为锚元素
icon ReactNode 在面包屑项文本前显示的自定义图标