WordPress 6.x 把導覽列的建構方式改得相當徹底。原本得先到「外觀 > 選單」建立一份選單，再透過小工具（Widget）或佈景主題設定把它掛到頁首，這套流程最少要切換三個畫面。現在改走區塊編輯器（Gutenberg）的導覽區塊，只要在網站編輯器（Site Editor）裡拖拉幾步，導覽列就能就地完成。
變動最大的地方在於「選單」這個概念本身。過去選單是儲存在後台資料庫裡的獨立物件，佈景主題透過 register_nav_menus() 宣告插槽，再由使用者手動指定哪份選單塞哪個插槽。導覽區塊不走這條路，它直接把選單結構存進頁首或頁尾的範本（Template）區塊樹裡，選單即版面，版面即選單，兩者不再分離。
這篇文章說明如何設定導覽區塊、建立多層下拉，以及讓行動版漢堡選單正確顯示，並在最後整理何時仍有必要保留傳統選單機制。
WordPress navigation 區塊與傳統選單的核心差異
理解這一節，後面的操作才不會中途混淆。
傳統選單有三個獨立元件要設定。一是在「外觀 > 選單」建立選單內容；二是把選單指定到佈景主題位置，例如「主要選單」或「頁尾選單」；三是在小工具區或自訂器（Customizer）確認它有被正確掛載。這三步各走各的畫面，稍有一步沒設完，前端就看不到選單。
導覽區塊把這三步合進了一個地方。打開網站編輯器，找到頁首範本，在裡面插入導覽區塊，選單項目就直接在那塊範本裡管理。不需要另外建立「選單」物件，也不需要指定「佈景主題位置」，因為它本來就已經在正確的位置上。
| 比較項目 | 傳統選單 | 導覽區塊 |
|---|---|---|
| 建立方式 | 外觀 > 選單 > 新增選單 | 網站編輯器裡插入區塊 |
| 儲存位置 | 後台資料庫（nav_menus） | 範本／範本組件區塊樹 |
| 掛載機制 | 指定佈景主題位置 | 即放即用，在哪放就在哪顯示 |
| 多層下拉 | 拖曳子項目縮排 | 插入子導覽（Submenu）區塊 |
| 行動版 | 佈景主題控制，選項有限 | 區塊設定面板可直接切換 |
| 與 FSE 的相容性 | 古典佈景主題限定 | 完整網站編輯（FSE）佈景主題限定 |
後面的操作說明以支援完整網站編輯的佈景主題為前提，例如 Twenty Twenty-Four 或 Kadence（FSE 版）。若用的是古典佈景主題，則仍需走傳統選單路線。
在網站編輯器裡建立導覽區塊
進入後台，點「外觀 > 編輯器」開啟網站編輯器。左側面板選「範本 > Header」，或選擇佈景主題對應的頁首範本名稱。
插入區塊並新增項目
點進頁首範本後，在現有的頁首區域點擊「+」新增區塊。搜尋「Navigation」並插入。插入後，左側面板會自動切換到該導覽區塊的設定欄位。
要新增選單項目，選取導覽區塊後點擊區塊工具列中的「+」。可以選擇以下幾種項目類型：
- 頁面連結（Page Link）：直接搜尋站內頁面，不需手動輸入 URL
- 自訂連結（Custom Link）：任意 URL，適合外部連結或錨點
- 文章分類（Category）：連到特定分類彙整頁
新增完成後，在編輯器中直接拖曳項目可以調整順序。整個操作介面和一般區塊編輯器的體驗一致。
儲存與同步
編輯完成後，右上角按「儲存」，選「儲存所有」。讓頁首範本和導覽區塊的變更一起寫入。
有個細節需要留意：若佈景主題有設定同步模式（Synced Pattern），同一份導覽區塊可能同時出現在多個範本。修改一處，其他使用同一份的範本也會跟著更新。不想讓變更影響其他位置，就先在選單區塊上按「分離（Detach）」，讓它成為獨立副本再做修改。
設定多層下拉選單
多層下拉的邏輯在導覽區塊裡是透過「子導覽（Submenu）」區塊實現的。傳統選單用縮排建立父子關係，導覽區塊則有專屬的子結構元件。
選取已存在的選單項目，在該項目的工具列點「+」新增子項目。系統會自動把該項目升格為含有下拉的父項，並在其中插入第一個子導覽連結。後續要再加子項目，點擊父項目的「+」繼續插入即可。
行為預覽上，滑鼠移到父項目，下拉才會展開。要在編輯器內直接看效果，點選區塊工具列的「預覽」按鈕切到預覽模式。或直接用右上角的「預覽 > 新索引標籤」在真實前端確認下拉動作。
深度部分，導覽區塊原生支援兩層（父層＋子層）。理論上可以繼續在子項目裡再加孫項目，但超過兩層在行動版的互動體驗通常會很差。建議超過兩層的資訊架構，改用「巢狀選單外掛（Mega Menu Plugin）」或重新規劃資訊架構，而非硬塞第三層。
行動版漢堡選單的設定
行動版是很多人第一次碰導覽區塊時最容易疏漏的部分。
選取導覽區塊，開啟右側「設定」面板。找到「行動裝置疊加（Mobile Overlay）」選項，有三個模式可選：
- 永不（Never）：任何裝置都以橫向展開顯示，不出現漢堡圖示
- 行動版（Mobile）：在小螢幕（通常是 768px 以下）自動切換成漢堡選單，點擊後以全螢幕或浮層方式展開
- 永遠（Always）：所有裝置都只顯示漢堡圖示，適合極簡設計需求
設成「行動版」後，切到行動裝置預覽。編輯器上方工具列有裝置圖示，確認漢堡圖示有出現。若前端顯示正常但點擊後選單沒展開，通常是佈景主題的 JavaScript 或 CSS 有覆蓋導覽區塊的行為。需要在佈景主題子佈景主題（Child Theme）的 style.css 排查衝突樣式。
漢堡圖示本身的外觀可以透過區塊工具欄的「樣式」面板調整顏色。但圖示形狀（三條橫線、X、其他）在內建設定裡不能替換。若需要自訂圖示形狀，目前需要透過 CSS 或額外外掛處理。
何時仍需保留傳統選單
導覽區塊並非在所有場景下都能取代傳統選單，有幾個情況值得留意。
使用的佈景主題若是古典型，不支援完整網站編輯（FSE）。網站編輯器根本進不去，導覽區塊無從設定，這時仍需走「外觀 > 選單」的傳統路線。
另外，若站台已透過 PHP 程式碼呼叫 wp_nav_menu() 輸出選單，且有在函式裡加入客製化 walker 或 items_wrap 邏輯。這些自訂行為在導覽區塊架構下並無對應。切換前需要重新用區塊方式重現相同功能，或改寫相關 PHP。
部分快取外掛或頁面建構器（Page Builder）與導覽區塊的互動也偶有相容問題。上線前建議在暫存環境（Staging）先行測試，確認動態選單（登入／未登入顯示不同項目）和下拉行為都如預期。