BreadcrumbsAPI

React 麵包屑組件的 API 參考文件。了解此導出模組的屬性、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	'顯示路徑'	覆寫展開按鈕的預設標籤。出於本地化目的，您可以使用提供的翻譯。
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 樣式的系統 prop。有關更多詳細資訊，請參閱 `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.

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

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