最簡單、最常用的導航組件。在水平緊湊空間內，為用戶提供分類內容的訪問入口。

解決什麼問題？

用戶完成任務需找到必要內容與功能。

適用場景

• 2-12 個分類
• 分類標題短且可預測
• 分類數量基本固定
• 展示 Web 產品頂級導航
• 配合標籤展示二級導航
• 頁面寬度關鍵時替代左側導航
• 控制導航狀態追蹤當前位置成本高時替代標籤
• 分類屬於同一產品體系

具體實施方案

1. 水平橫條顯示單行鏈接，置於網站頭部之下
2. 可結合「標籤」同時顯示一級/二級導航
3. 純頂部導航時，首個鏈接宜為「首頁」指向站點首頁；若在標籤下，則標籤首個為首頁
4. 分類間用留白與「管道符 |」（或垂直居中點、簡單視覺元素）分隔
5. 導航欄鏈接指向的頁面，自身必須包含頂部導航欄
6. 分類過多時，用「更多...」鏈接或改用左側導航
7. 與標籤配合展示高層級內容
8. 與左側導航配合展示二/三級內容

分類設計鐵律：心智模型 > 視覺呈現

1. 盡量降低分類交集
2. 分類界限清晰（易判斷目標是否在該分類）
3. 避免過寬泛或過特殊的分類名

為何選用它？

提供方便、簡潔的分類展示，讓用戶高效訪問品類繁多的有組織內容。

原文：https://developer.yahoo.com/ypatterns/navigation/bar/topnav.html
文章來源：pd4.me/blog/ 轉載請注明出處鏈接。