Breadcrumbs

Breadcrumbs 组件用于显示应用程序中指向当前页面或资源的层级链接结构。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

HeroUI 导出 2 个与面包屑相关的组件：

• Breadcumbs: 主组件，是其他组件的包装器。
• BreadcrumbItem: 表示面包屑项目的组件。

用法

禁用状态

禁用的面包屑会显示项目但阻止导航，确保布局一致。表示当前页面的最后一项不会被禁用。

尺寸

颜色

变体

下划线样式

圆角

路由

<BreadcrumbItem> 组件与 Next.js 和 React Router 等框架和客户端路由器兼容。请参阅 路由 指南了解如何设置。

受控模式

您可以使用 isCurrent 和 onAction 属性来控制当前/活动项目。

注意: 如果需要，可以使用 onPress 属性来处理面包屑项目上的点击事件。

菜单类型

可以将 Breadcrumbs 组件用作水平菜单。当您希望显示可能的导航列表并让用户选择其中之一时，这非常有用。

起始与结束内容

您可以使用 startContent 和 endContent 属性向面包屑的起始或结束位置添加任何元素。上面的示例使用 startContent 属性向面包屑的起始位置添加图标。

自定义分隔符

您可以使用 separator 属性自定义面包屑之间的分隔符。

自定义项目

BreadcrumbItem 组件接受任何元素作为其子元素。这允许您自定义面包屑项目的外观。

上面的示例使用 Dropdown 组件在面包屑中创建下拉菜单。

Breadcrumbs 组件仅选取 BreadcrumbItem 组件作为其子组件。这意味着您不能将任何其他组件直接放置在 Breadcrumbs 组件内部。

折叠项目

Breadcrumb 组件提供 3 个属性来控制项目的折叠：

• maxItems: 指定要显示的面包屑最大数量。当项目数量超过最大值时，将只显示前 itemsBeforeCollapse 个项目和最后 itemsAfterCollapse 个项目，中间用省略号表示。
• itemsBeforeCollapse: 如果超出最大项目数，则在省略号前显示的项目数量。
• itemsAfterCollapse: 如果超出最大项目数，则在省略号后显示的项目数量。

注意: 省略号项目将使用第一个被折叠的项目作为其 href 属性。

自定义省略号项目

您可以使用 renderEllipsis 属性自定义省略号项目。此属性接受一个返回 React 元素的函数。

插槽

• Breadcrumbs 插槽

• base: 面包屑的主插槽。它包装了 list 插槽。

• list: 面包屑列表的包装器。

• ellipsis: 省略号项目的插槽。仅在面包屑折叠时可见。

• separator: 自定义分隔符的插槽，可以使用 separator 属性设置。

• BreadcrumbItem 插槽

• base: 面包屑项目的主插槽。它包装了 item 插槽。

• item: 面包屑项目的包装器。

• separator: 项目分隔符的插槽。

自定义面包屑样式

您可以使用 classNames 属性自定义 Breadcrumbs 的样式，并使用 itemClasses 属性自定义其项目。

数据属性

BreadcrumbItem 在 item 元素上具有以下属性：

• data-current: 当面包屑项目是当前项目时。基于面包屑的 isCurrent 属性或项目是否为最后一项。
• data-disabled: 当面包屑项目被禁用时。基于面包屑的 isDisabled 属性。
• data-focus: 当面包屑项目获得焦点时。基于 useFocusRing。
• data-focus-visible: 当面包屑项目通过键盘获得焦点时。基于 useFocusRing。

无障碍访问

• 实现为项目的有序列表。
• 支持在面包屑上进行鼠标、触摸和键盘交互。
• 支持通过 <a> 元素或通过 ARIA 的自定义元素类型进行导航链接。
• 支持对地标导航区域的本地化 ARIA 标签。
• 支持禁用面包屑。
• 最后一项使用 aria-current 自动标记为当前页面。

API

Breadcrumbs 属性

Breadcrumbs 事件

BreadcrumbItem 属性

BreadcrumbItem 事件

类型

渲染省略号函数