BreadcrumbsAPI

React Breadcrumbs 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

有关此 React 组件的用法示例和详细信息，请访问组件演示页面

import Breadcrumbs from '@mui/material/Breadcrumbs';
// or
import { Breadcrumbs } from '@mui/material';

阅读本指南，了解有关最小化捆绑包大小的差异。

Typography 组件的属性也可用。

名称	类型	默认	描述
children	node	-	组件的内容。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
component	elementType	-	用于根节点的组件。可以使用字符串来使用 HTML 元素或组件。
expandText	string	'Show path'	覆盖展开按钮的默认标签。出于本地化目的，您可以使用提供的翻译。
itemsAfterCollapse	integer	1	如果超过最大项目数，则在省略号后显示的项目数。
itemsBeforeCollapse	integer	1	如果超过最大项目数，则在省略号前显示的项目数。
maxItems	integer	8	指定要显示的最大面包屑数量。当数量超过最大值时，将仅显示前 `itemsBeforeCollapse` 个和后 `itemsAfterCollapse` 个项目，中间用省略号分隔。
separator	node	'/'	自定义分隔符节点。
slotProps	{ collapsedIcon?: func \| object }	{}	用于 Breadcumb 内每个 slot 的 props。
slots	{ CollapsedIcon?: elementType }	{}	用于 Breadcumb 内每个 slot 的组件。可以使用字符串来使用 HTML 元素或组件。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。

ref 被转发到根元素。

虽然上面没有明确记录，但 Typography 组件的属性在 Breadcrumbs 中也可用。您可以利用它来定位嵌套组件。

您可以使用 MuiBreadcrumbs 通过主题更改此组件的默认属性。

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用于组件的 slots。

类名	规则名	描述
.MuiBreadcrumbs-li	li	应用于 li 元素的样式。
.MuiBreadcrumbs-ol	ol	应用于 ol 元素的样式。
.MuiBreadcrumbs-root	root	应用于根元素的样式。
.MuiBreadcrumbs-separator	separator	Styles applied to the separator element.

您可以使用以下自定义选项之一覆盖组件的样式

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。