麵包屑

麵包屑會在應用程式中顯示目前頁面或資源的連結階層。

安裝

以上命令僅適用於個別安裝。如果 @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 屬性來設定。

• 麵包屑項目插槽

• 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

麵包屑屬性

麵包屑事件

麵包屑項目屬性

麵包屑項目事件

類型

渲染省略符號函式