Breadcrumbs.md

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

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. 麵包屑設計建議

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

  • 使用清楚的分隔符號(如 >/

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

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


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

Last updated