面包屑 (Breadcrumbs)

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

安装

上面的命令仅用于单独安装。如果已全局安装 @nextui-org/react ，您可以跳过此步骤。

导入

NextUI 导出 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 元素的函数。

插槽

• 面包屑插槽

• 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

面包屑属性

面包屑事件

BreadcrumbItem 属性

BreadcrumbItem 事件

类型

渲染省略号函数