面包屑

面包屑在应用程序中显示当前页面或资源的链接层次结构。

安装

以上命令仅用于单独安装。如果已全局安装 @heroui/react，则可以跳过此步骤。

导入

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

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

用法

禁用

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

尺寸

颜色

变体

下划线

圆角

路由

<BreadcrumbItem> 组件可与框架和客户端路由器（如 Next.js 和 React Router）一起使用。请参阅路由指南，了解如何设置。

受控

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

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

菜单类型

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

起始和结束内容

您可以使用 startContent 和 endContent 属性在面包屑的开头或结尾添加任何元素。上面的示例使用 startContent 属性在面包屑的开头添加图标。

自定义分隔符

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

自定义项

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

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

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

折叠项

Breadcrumb 组件提供了 3 个 props 来控制条目的折叠。

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

注意：省略号条目将使用第一个折叠条目作为其 href prop。

自定义省略号条目

您可以使用 renderEllipsis prop 来自定义省略号条目。此 prop 接收一个返回 React 元素的函数。

插槽

• Breadcrumbs 插槽

• base：breadcrumbs 的主要插槽。它包裹了 list 插槽。

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

• ellipsis：省略号条目的插槽。仅当面包屑被折叠时可见。

• separator：自定义分隔符的插槽，可以使用 separator prop 设置。

• BreadcrumbItem 插槽

• base：breadcrumb item 的主要插槽。它包裹了 item 插槽。

• item：breadcrumb item 的包装器。

• separator：条目分隔符的插槽。

自定义 Breadcrumbs 样式

您可以使用 classNames prop 来自定义 Breadcrumbs 的样式，并使用 itemClasses prop 来自定义其条目的样式。

数据属性

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

• data-current：当面包屑条目是当前条目时。基于面包屑的 isCurrent prop 或条目是否是最后一个条目。
• data-disabled：当面包屑条目被禁用时。基于面包屑的 isDisabled prop。
• data-focus：当面包屑条目被聚焦时。基于 useFocusRing。
• data-focus-visible：当面包屑条目通过键盘聚焦时。基于 useFocusRing。

无障碍访问

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

API

Breadcrumbs Props

Breadcrumbs Events

BreadcrumbItem Props

BreadcrumbItem Events

类型

Render Ellipsis Function