Breadcrumbs

麵包屑導航是一種常見的輔助導航設計，用來顯示使用者在網站結構中的位置，並提供快速返回上層頁面的方式。

1. 什麼是麵包屑導航？

麵包屑（Breadcrumbs）是一條階層式的文字路徑，通常出現在網頁上方，類似於：

首頁 > 產品類別 > 電子產品 > 筆記型電腦

它可以幫助使用者：

• 瞭解目前所在的層級與位置

• 快速返回上層頁面

• 提升整體網站的可用性與 SEO

2. 麵包屑的三種類型

（1）位置型（Location-Based）

依據網站的階層結構來顯示目前位置。

<nav class="breadcrumb">
  <a href="/">首頁</a> >
  <a href="/products">產品類別</a> >
  <span>筆記型電腦</span>
</nav>

（2）屬性型（Attribute-Based）

根據目前頁面或商品的屬性組合所構成，不一定代表實際階層。

<nav class="breadcrumb">
  <a href="/search">搜尋結果</a> >
  <span>價格：$1000 以下</span>
</nav>

（3）路徑型（Path-Based）

顯示使用者實際瀏覽的路徑，具有個人化特性（不常見，容易混淆）。

3. 麵包屑設計建議

• 放置於頁面頂部，標題之上

• 使用清楚的分隔符號（如 >、/ 或 →）

• 最後一項不設超連結，顯示目前所在頁

• 不要過度依賴路徑型麵包屑，避免使用者混淆

---

麵包屑導航是網站資訊架構中的重要輔助工具，簡單實用，能有效提升使用者體驗。