導覽與資訊架構
手機不是把 Sidebar 壓扁；先重排使用者最常去的地方。
Header、Navbar、Sidebar、展開選單與 Bottom Navigation 都在幫人移動，但它們分工不同。先確認目的地的層級、使用頻率與螢幕空間，再決定哪一組入口要固定可見。
選型流程
先問五個問題，避免把同一份選單複製到每個位置。
比較表
六個名稱都跟導覽有關，但它們不能互相頂替。
點選元件名稱可查看可操作的 LumenDesk Demo、AI Prompt 與驗收清單。
| 比較面向 | Header｜頁首 | Navbar｜導覽列 | Sidebar Navigation｜側邊導覽 | Navigation Menu｜導覽選單 | Bottom Navigation｜底部導覽 | Current Page Indicator｜目前頁指示 |
|---|---|---|---|---|---|---|
| 主要回答的問題 | 哪些內容跨頁共用？ | 哪些同層級目的地要隨時可見？ | 桌面工作區如何分組呈現較多目的地？ | 哪些次級目的地要按需揭露？ | 手機最常去的地方是哪幾個？ | 現在正在看哪一個位置？ |
| 適合的資訊量 | 品牌、帳號、少量全站入口 | 2 到 5 個同層級目的地 | 可分組的多個目的地與工作區 | 少量次級入口 | 3 到 5 個高頻目的地 | 每一組導覽中的一個目前項目 |
| 桌面上的位置 | 頁面最上方 | 常在 Header 內或緊鄰 Header | 主要內容左側 | Header 或 Navbar 中的展開區 | 通常不作為桌面主要導覽 | 所有導覽模式都要有 |
| 手機上的轉換 | 保留品牌與開啟選單入口 | 改由 Drawer 或 Bottom Navigation 承接 | 改為 Drawer，不是縮小側欄 | 保留按鈕與可關閉的選單 | 固定在安全區上方 | 在 Drawer 與 Bottom Navigation 同步 |
| 常見誤用 | 把所有頁面按鈕塞進頂部列 | 把儲存、刪除等操作當成導覽 | 縮到只剩看不懂的圖示 | 只做 hover，鍵盤無法開關 | 把桌面所有項目搬到底部 | 只換顏色，沒有 aria-current |
這組結論
同一個目的地，可以換位置；不能失去層級、名稱與目前位置。
桌面工作區可用 Sidebar 顯示分組結構；手機只留高頻入口在底部。無論在哪個尺寸，導覽項目都必須是可操作的連結，並用 aria-current 與清楚的畫面提示告訴人目前在哪裡。
操作 Sidebar Navigation Demo →