麵包屑API

React 麵包屑組件的 API 參考文件。了解此導出模組的 props、CSS 和其他 API。

範例

有關此 React 組件的使用範例和詳細資訊，請訪問組件範例頁面

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

閱讀這篇關於最小化 bundle 大小的指南，了解其中的差異。

原生組件的 Props 也可用。

名稱	類型	預設	描述
children	node	-	組件的內容。
component	elementType	-	用於根節點的組件。可以使用字串來使用 HTML 元素或組件。
separator	node	'/'	自訂分隔符號節點。
size	'sm' \| 'md' \| 'lg' \| string	'md'	組件的尺寸。它接受介於 'sm' 和 'lg' 之間的 theme 值。要了解如何為組件添加自訂尺寸，請查看Themed components—Extend sizes。
slotProps	{ li?: func \| object, ol?: func \| object, root?: func \| object, separator?: func \| object }	{}	用於每個 slot 內部的 props。
slots	{ li?: elementType, ol?: elementType, root?: elementType, separator?: elementType }	{}	用於每個 slot 內部的組件。有關更多詳細資訊，請參閱下方的 Slots API。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆蓋以及其他 CSS 樣式的系統 prop。有關更多詳細資訊，請參閱 `sx` 頁面。

`ref` 會轉發到根元素。

您可以使用 JoyBreadcrumbs 通過 theme 更改此組件的預設 props。

要了解如何自訂 slot，請查看Overriding component structure 指南。

Slot 名稱	類別名稱	預設組件	描述
root	.MuiBreadcrumbs-root	`'nav'`	呈現 root 的組件。
ol	.MuiBreadcrumbs-ol	`'ol'`	呈現 ol 的組件。
li	.MuiBreadcrumbs-li	`'li'`	呈現 li 的組件。
separator	.MuiBreadcrumbs-separator	`'li'`	呈現 separator 的組件。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的 slots。

您可以使用以下自訂選項之一來覆蓋組件的樣式

如果您在此頁面中找不到資訊，請考慮查看組件的實作以獲取更多詳細資訊。