麵包屑

麵包屑導航是一種導航工具，可協助使用者追蹤在應用程式內的位置。

簡介

麵包屑組件包含一個連結列表，向使用者顯示指定頁面相對於應用程式結構的層級關係。它提供了一個簡單的視覺輔助，以便更好地理解上下文，並在較高和較低層級的頁面之間輕鬆導航。

<Breadcrumbs>
  <Link />
  ...
</Breadcrumbs>

Playground

尺寸

分隔符號

基本用法

import Breadcrumbs from '@mui/joy/Breadcrumbs';

麵包屑組件作為導航連結的包裝器。它被設計為與連結和排版組件一起使用，如下所示

<Breadcrumbs aria-label="breadcrumbs">
  {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item: string) => (
    <Link key={item} color="neutral" href="#basics">
      {item}
    </Link>
  ))}
  <Typography>Dr. Zoidberg</Typography>
</Breadcrumbs>

<Breadcrumbs aria-label="breadcrumbs">
  {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item: string) => (
    <Link key={item} color="neutral" href="#basics">
      {item}
    </Link>
  ))}
  <Typography>Dr. Zoidberg</Typography>
</Breadcrumbs>

按下 Enter 鍵開始編輯

自訂

尺寸

麵包屑組件提供三種尺寸：sm、md（預設）和 lg

分隔符號

預設情況下，麵包屑組件會在每個導航項目之間插入一個正斜線 (/)。使用 separator 屬性定義自訂分隔符號，可以是字元或符號，以及圖示

<Breadcrumbs separator={<KeyboardArrowLeft />} aria-label="breadcrumbs">
  <Typography>Amy</Typography>
  {['Characters', 'Futurama', 'TV Shows', 'Home'].map((item: string) => (
    <Link key={item} color="neutral" href="#separators">
      {item}
    </Link>
  ))}
</Breadcrumbs>

<Breadcrumbs separator={<KeyboardArrowLeft />} aria-label="breadcrumbs">
  <Typography>Amy</Typography>
  {['Characters', 'Futurama', 'TV Shows', 'Home'].map((item: string) => (
    <Link key={item} color="neutral" href="#separators">
      {item}
    </Link>
  ))}
</Breadcrumbs>

按下 Enter 鍵開始編輯

與連結和排版組件一起使用

import Link from '@mui/joy/Link';

import Typography from '@mui/joy/Typography';

麵包屑組件不接受常見的 Joy UI 樣式屬性，例如 variant、color、startDecorator 或 endDecorator，但連結和排版組件則接受。因此，大多數影響內容的自訂樣式應直接應用於這些組件，而不是麵包屑組件。

下面的示範展示如何使用 startDecorator 將圖示新增至連結，以及如何使用 color 屬性變更顏色

<Breadcrumbs separator="›" aria-label="breadcrumbs">
  <Link color="primary" href="/">
    <PublicIcon sx={{ mr: 0.5 }} />
    United States
  </Link>
  {['Springfield', 'Simpson'].map((item) => (
    <Link key={item} color="success" href="#usage-with-link-and-typography">
      {item}
    </Link>
  ))}

  <Typography>Homer</Typography>
</Breadcrumbs>

<Breadcrumbs separator="›" aria-label="breadcrumbs">
  <Link color="primary" href="/">
    <PublicIcon sx={{ mr: 0.5 }} />
    United States
  </Link>
  {['Springfield', 'Simpson'].map((item) => (
    <Link key={item} color="success" href="#usage-with-link-and-typography">
      {item}
    </Link>
  ))}

  <Typography>Homer</Typography>
</Breadcrumbs>

按下 Enter 鍵開始編輯

CSS 變數 Playground

試用麵包屑組件可用的 CSS 變數，以查看設計如何變化。您可以使用這些變數，透過 sx 屬性和主題來自訂組件。

<Breadcrumbs />

CSS 變數

--Breadcrumbs-gap

常見範例

精簡麵包屑

當頁面層級結構過於深入時，您可能想要將多個層級精簡為一個。下面的示範僅顯示先前的幾個層級，直到您點擊省略符號以顯示完整層級結構

import Menu from '@mui/joy/Menu';

作為上述精簡示範行為的替代方案，請考慮新增選單組件，以在下拉列表中顯示精簡的連結

輔助功能

請務必為麵包屑組件新增資訊豐富的 aria-label 描述。

以下功能遵循 WAI-ARIA Authoring Practices，旨在優化組件的基準輔助功能

連結集使用有序列表 (<ol>) 結構化。
連結之間的視覺分隔符號已使用 aria-hidden 隱藏，以防止螢幕閱讀器宣告它們。
元素與 aria-label 一起使用，將結構識別為麵包屑導航，並使其成為導航地標，以便使用輔助技術輕鬆定位。
目前頁面的連結已將 aria-current 設定為 page。

結構

麵包屑組件由根 <nav> 組成，它包裝在 <ol> 周圍，列表項目對應於連結及其分隔符號的路徑

<nav aria-label="breadcrumbs" class="MuiBreadcrumbs-root">
  <ol class="MuiBreadcrumbs-ol">
    <li class="MuiBreadcrumbs-li">
      <!-- Link or Typography -->
    </li>
    <li aria-hidden="true" class="MuiBreadcrumbs-separator">/</li>
    <li class="MuiBreadcrumbs-li css-1rqbcrs-MuiBreadcrumbs-ol">
      <!-- Link or Typography -->
    </li>
  </ol>
</nav>

API

請參閱以下文件，以取得此處提及之組件的所有可用屬性和類別的完整參考。

<Breadcrumbs />