---
title: "Breadcrumb"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Breadcrumb using semantic HTML for accessible, SEO-friendly navigation trails. Supports custom separators, icons, and responsive layouts."
url: https://frutjam.com/zh-hant/components/breadcrumb
---

# Breadcrumb Component

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

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

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

## 基本用法

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

## 麵包屑分離器

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

```html
<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
<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"` 將結構包裝在