
Navi+ Menu Builder
Navi+ 選單建立器是一個無程式碼、AI 驅動的導航層,讓您可以在幾分鐘內在任何網站上新增和自訂標籤列、超級選單、滑動選單、浮動按鈕等——行動裝置優先、多語言,並透過全球 CDN 交付優化速度。
https://naviplus.io/?ref=producthunt&utm_source=aipure

產品資訊
更新時間:2026年06月08日
什麼是 Navi+ Menu Builder
Navi+ 選單建立器 (Navi+ AI 選單建立器) 是一個拖放工具,用於建立現代網站導航,而無需重新設計您的主題或編寫程式碼。它適用於 Shopify(透過官方應用程式)以及 WordPress、Wix、Webflow、Squarespace、WooCommerce 或任何自訂網站等其他平台,透過簡單的嵌入程式碼片段。Navi+ 擁有 20 多種預設佈局和多種選單類型——例如底部/標籤列、超級選單、滑動(抽屜/漢堡)選單、網格選單和 FAB(浮動動作按鈕)——可幫助您引導訪客前往主要頁面、產品、活動和實用工具(搜尋、支援、聊天),提供更簡潔、更像應用程式的體驗。
Navi+ Menu Builder 的主要功能
Navi+ 選單建立器是一個無程式碼、拖放式的導覽建立器,讓您可以在 Shopify 和其他平台透過嵌入程式碼片段,新增和自訂多種選單類型(分頁列、巨型選單、側滑選單、固定/導覽列、浮動按鈕、網格佈局)。它設計輕巧且主題安全(純 HTML5/CSS3),支援行動優先和獨立的行動/桌面配置,並包含 AI 輔助工作流程,例如生成選單設計、匯入現有選單以及自動翻譯成多種語言。選單透過全球 CDN 傳送以實現快速效能,進階使用者可以選擇使用自訂 CSS/HTML/JavaScript 進行擴展。
多類型導覽系統: 建立分頁列、巨型選單、側滑選單、下拉/網格佈局、固定導覽列和浮動動作按鈕—使用一個或組合多個以應對不同的使用者體驗工作(行動快速存取與桌面探索)。
無程式碼拖放建立器 + 範本: 從預先設計的範本開始,然後使用視覺編輯器自訂顏色、圖示、佈局和結構—無需設計或技術技能。
AI 輔助建立和優化: 使用 AI 生成或重新設計選單,掃描/匯入現有網站選單以在 Navi+ 中重新建立,並將選單內容自動翻譯成多種語言。
行動優先,獨立桌面配置: 獨立配置行動和桌面體驗(例如,行動裝置上的分頁列和桌面裝置上的巨型選單),以提高跨裝置的可用性。
快速、輕巧且主題安全的交付: 採用純 HTML5/CSS3 建置,以避免主題/應用程式衝突,並透過全球 CDN 傳送,該 CDN 在六大洲設有邊緣伺服器,以實現低延遲效能。
可供進階使用者擴展: 可選地新增自訂 CSS/HTML/JavaScript 並匯出/重複使用選單配置(例如,JSON 匯出),以在網站或主題之間更快地迭代。
Navi+ Menu Builder 的使用案例
電子商務店面導覽 (Shopify/WooCommerce): 透過結合行動分頁列用於主要目的地(商店、搜尋、購物車、支援)和桌面巨型選單用於類別瀏覽、促銷和特色系列,改善產品發現和轉換。
內容豐富的網站(部落格/新聞/雜誌): 使用巨型選單和側滑選單來組織深層主題樹、突顯熱門文章,並引導讀者到關鍵部分,而不會讓標題過於擁擠。
多語言/國際網站: 自動翻譯選單並維護語言變體,以幫助全球訪客快速導覽,特別是對於擴展到新地區的商店。
服務業務和潛在客戶開發: 使用浮動按鈕或底部列建立類似應用程式的導覽,其中包含突出的行動項目(通話、WhatsApp、預訂、聯絡),以增加查詢和預訂。
活動和季節性促銷中心: 透過展示活動磁貼/橫幅並將訪客引導至優先登陸頁面,為銷售活動(例如黑色星期五)建立臨時導覽佈局。
跨平台網站 (WordPress, Wix, Webflow, Squarespace): 嵌入單一程式碼片段即可新增現代導覽,而無需重新建置主題—這對於希望在不同網站建立器之間擁有統一選單系統的團隊非常有用。
優點
真正無程式碼設定,帶有範本和拖放編輯;需要時可選進階自訂。
行動優先、多選單方法比單一「在行動裝置上折疊的巨型選單」提供更好的使用者體驗。
設計輕巧且無衝突(HTML5/CSS3),並透過全球 CDN 傳送以提高速度。
提供免費方案,包含終身使用、核心功能和慷慨的每月檢視限制。
缺點
某些進階功能(例如,更豐富的範本/功能、多個選單)可能需要從免費/入門級別升級。
AI 輔助匯入在掃描現有選單後可能仍需要手動調整。
某些平台特定功能(例如,完整的多語言工作流程)在 Shopify 上可能比在其他平台上更成熟。
如何使用 Navi+ Menu Builder
1) 將 Navi+ 安裝或連接到您的網站: Shopify:從 Shopify App Store 安裝官方應用程式。其他平台 (WordPress/Wix/Webflow/Squarespace/custom):前往 naviplus.io,建立一個免費帳戶,登入 dash.naviplus.app,然後按照連接說明操作。
2) 選擇選單將出現的位置(嵌入方法): 決定您希望選單出現在所有頁面(全站)還是僅在特定部分/頁面。在 Shopify 中,您可以根據您的主題設定透過主題/區塊(常見)或每頁/區塊嵌入。
3) 在 Navi+ 儀表板中建立新選單: 在 dash.naviplus.app 中,建立一個選單並選擇您需要的選單類型(例如,行動裝置的底部/標籤列、桌上型電腦的超級選單、滑動/抽屜選單、FAB、網格)。
4) 選擇一個範本: 從預設佈局中選擇(20 多個範本)。範本完全可自訂,並針對不同的裝置和使用案例進行設計。
5) 建立您的選單結構(拖放): 新增選單項目,將它們組織成組/層級,並配置連結。保持深度合理(通常 2 個層級就足夠了)以保持可用性。
6) 自訂設計: 調整顏色、字體、間距、圖示/圖像和佈局選項。如果您需要更深入的控制,請使用自訂 CSS (Navi+ 支援透過 CSS 進行進階自訂)。
7) 配置行動裝置與桌上型電腦行為(行動裝置優先): 如果需要,為行動裝置和桌上型電腦設定單獨的選單(例如,行動裝置上的底部/標籤列和桌上型電腦上的超級選單)。Navi+ 旨在優化每種裝置類型,而不是依賴單一響應式選單。
8) (可選) 使用 AI 功能加速設定: 使用 AI 重新設計選單顏色/結構/內容,將您現有的網站選單轉換/匯入到 Navi+,並將您的選單自動翻譯成多種語言。
9) (可選) 啟用多語言選單: 直接在 Navi+ 中為您的選單新增其他語言(無需額外外掛程式)。按照儀表板/文件中的說明配置語言設定。
10) 在非 Shopify 網站上嵌入選單(貼上程式碼片段): 從 Navi+ 複製提供的嵌入程式碼,並將其貼到您希望選單載入的網站位置。範例包括從 CDN 載入 Navi+ 的 script 標籤,以及容器元素和可選設定,例如商店、embed_id 和固定行為。
11) 發布選單: 在 Navi+ 儀表板中點擊發布。您的選單將上線並透過 CDN 邊緣交付以實現快速載入。
12) 在推出到實際流量之前安全測試: 如果您的網站有常規流量,請複製您的 Shopify 主題(或預備環境)並先在那裡測試 Navi+。您可以隨時開啟/關閉選單。
13) 解決常見問題(主題/應用程式衝突): 如果選單與其他固定元素重疊,請調整 z-index。如果您無法在 Shopify 中插入選單,常見原因包括非 OS2.0 主題、經過大量修改的主題或覆蓋 Shopify 區塊的頁面建立器應用程式。
14) 更換 Shopify 預設選單時減少感知延遲(可選): 當更換/插入主題預設選單之前/之後時,Shopify 可能會先渲染預設選單,導致輕微延遲。最佳實踐:使用主題中的 CSS 隱藏預設主題選單,以便立即更改。
15) 在選單之間重複使用或轉移選單項目(快速方法): 在兩個瀏覽器標籤中開啟 Navi+ 應用程式,並將選單項目從一個選單複製到另一個選單。
16) 保持在方案限制內(入門方案提示): 在入門方案(1 個選單槽)上,如果項目標記為紅色 (i) 警告,表示它們需要不可用的功能(例如,圖像上傳/進階互動),請移除這些項目,或升級到商業/精英方案以解鎖更多選單和功能(通常有試用期)。
Navi+ Menu Builder 常見問題
Navi+ AI 選單建立器是一個無程式碼導覽建立器,讓您可以在幾分鐘內為網站新增分頁列、超級選單、滑動選單及其他選單類型,並具備用於設計、轉換現有選單和翻譯的 AI 功能。











