跳至主要內容
Frutjam logo Frutjam
v2.2.5
Theme

麵包屑組件

最後更新:

純 CSS Tailwind CSS 麵包屑導航，具有自訂分隔符號和可存取的地標標記。 WCAG AA，適用於 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 專案。

麵包屑組件顯示導航層次結構並幫助使用者了解他們在網站中的位置。麵包屑採用語義 HTML 導航元素和 ARIA 地標構建，可實現可訪問性，允許用戶快速導航到父部分，從而提高可用性。 Frutjam 麵包屑系統會自動呈現分隔符號並支援自訂分隔符號以實現靈活的樣式。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
breadcrumb根據麵包屑路徑的導航容器
breadcrumb-list修飾符麵包屑項目的有序列表
breadcrumb-item修飾符麵包屑中的單一列表項
breadcrumb-link修飾符錨點元素樣式為麵包屑鏈接
breadcrumb-separator修飾符項目之間的分隔符號元素
breadcrumb-current修飾符標記目前（活動）頁面項目

基本用法

如果未提供分隔符，則麵包屑項目之間會自動顯示箭頭。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav className="breadcrumb" aria-label="Breadcrumb">
  <ol className="breadcrumb-list">
    <li className="breadcrumb-item">
      <a href="/" className="breadcrumb-link">Home</a>
    </li>
    <li className="breadcrumb-item">
      <span className="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

麵包屑分離器

帶有文字分隔符號的麵包屑導航

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current" aria-current="page">Badge</span>
    </li>
  </ol>
</nav>

帶有圖示分隔符號的麵包屑導航

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <span class="breadcrumb-current" aria-current="page">Button</span>
    </li>
  </ol>
</nav>

麵包屑導航輔助功能

為了確保螢幕閱讀器可以存取麵包屑：

  • 使用 aria-label="Breadcrumb" 將結構包裝在 <nav> 元素中。
  • 最後一項（目前頁面）應使用 aria-current="page" 並且最好是 <span> 而不是連結。
  • 螢幕閱讀器應忽略分隔符號（如果使用物理元素，通常透過 CSS 或 aria-hidden="true" 處理）。

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 麵包屑 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP