用於直觀網站導航的頂級 Drupal 8（和 9）模塊

成功網站的秘訣是什麼？ 好吧，我可以立即想到 10 多個因素。 比如有吸引力的設計、頁面加載速度、內容質量、營銷工作等等。 一個重要但經常被忽視的元素是直觀的導航。 Drupal 8 有一組很棒的模塊來改進您網站的導航結構。 我們策劃了一個頂級 Drupal 8（和 9）模塊列表，這些模塊支持簡單直觀的網站導航。 請仔細閱讀，找出答案。

良好的網站導航可以讓網站訪問者在登陸您的網站後立即確切地知道從哪裡獲取他們的信息。 相反，糟糕的網站導航會損害您的轉化率並增加跳出率。 具有吸引力設計的網站並不總是意味著瀏覽它是直觀的。 我見過設計普通但導航結構很好的網站。 我一直回到他們身邊，因為我知道我可以得到我需要的東西而不會到處亂跑。 根據 CrazyEgg 的說法，拇指規則是用戶點擊次數不應超過 3 次才能找到他們需要的東西。

直觀網站導航的元素

您的網站訪問者應該能夠順利地從一個頁面導航到另一個頁面，而不會分心或困惑。 分心或困惑的用戶會在您與他們建立聯繫之前離開您的網站。 擁有出色的設計固然很好，但如果您的訪問者無法找到您的聯繫表格，那就沒有意義了，是嗎？ 那麼，什麼是好的導航結構呢？

1. 主導航欄

這是網站最關鍵的導航元素。 它是一個水平（有時是垂直）欄，列出了指向您網站周圍訪問者的鏈接。 一個好的主導航欄需要簡單、簡短、一致、有用和吸引人。

2. 麵包屑

這些有用的導航輔助工具可幫助網站訪問者確定他們的確切位置。 它們是從父頁面開始到當前頁面結束的一串鏈接，通常用“>”或“/”符號分隔。

3. 多欄菜單（和子菜單）

具有大量分支和子分支的更複雜的網站應該使用多列菜單。 同樣，這些菜單應該簡單且易於瀏覽。

4. 站點地圖

通常被認為只是 SEO 助推器，站點地圖作為導航輔助工具也非常有用。 典型的站點地圖應該顯示整個網站的層次結構。

5. CTA（號召性用語）按鈕

這就是所有動作實際發生的地方！ 這些 CTA 按鈕的正確放置在顏色、字體樣式、大小、文本等其他因素中起著重要作用。

6. 側邊欄

這是添加特定於頁面的鏈接以增強網站訪問者的 UX 的好地方。 好的側邊欄應該簡單，不要太長，包含 CTA 並適當排序。

7. 超鏈接

在這裡，我們更多地談論內部鏈接而不是外部鏈接。 超鏈接應該是直觀的，並將訪問者引導到他們期望的頁面（請不要感到意外）。 儘管擁有內部鏈接對 SEO 有好處，但不要過度使用，否則您可能會失去對頁面的關注。

8. 頁腳

頁腳很容易被忽略，通常僅用於顯示版權詳細信息。 人們不會滾動到頁面末尾的神話現在已經破滅了。 典型的頁腳應該包含您無法在頁眉或側邊欄部分顯示的鏈接。 它還可以包含您的聯繫方式以及郵件列表註冊迷你表格。

用於直觀導航的頂級 Drupal 8（和 9）模塊

1. 菜單塊

Drupal 8 Menu Block 模塊的設計遵循 Drupal 的標準樹形導航風格，但提供了比核心菜單模塊中提供的功能更多的增強功能。 您可以輕鬆配置菜單鏈接塊並指定要開始和結束的級別。 您可以顯示的級別數量沒有限制。 您可以選擇保持子菜單元素處於展開狀態。 此模塊的一些基本功能已移植到 Drupal 8 核心。 菜單塊模塊也支持 Drupal 9。

2.簡單的麵包屑

Drupal 8 Easy Breadcrumb 模塊的工作原理是從網頁的當前 URL 中提取位置段。 它提供了大量的可配置選項，可以替換現有的 Drupal 麵包屑模塊。 您可以選擇完全隱藏主頁鏈接或任何其他指定的鏈接。 Easy 麵包屑模塊也支持 Drupal 9！

3. 超級魚

Drupal 8 Superfish 模塊是您擁有大型、多層、多列下拉菜單的理想選擇。 該模塊與 jQuery Superfish 插件集成，這是一個高度通用的菜單插件，適用於觸摸屏、屏幕閱讀器和其他鍵盤交互。 它可以配置為在鼠標移開、動畫、隱藏和顯示菜單鏈接、如果檢測到子菜單時添加箭頭等添加時間延遲。 它也與 Drupal 9 兼容。

4. 網站地圖

Drupal 8 站點地圖模塊簡單、乾淨且易於使用。 它可以以清晰的層次結構顯示整個站點結構。 您還可以選擇為博客和類別生成和顯示 RSS 提要。 站點地圖模塊支持 Drupal 9。

5. 菜單項角色訪問

此模塊允許您向菜單添加訪問控制。 您可以根據用戶角色啟用和禁用菜單項。 Drupal 8 菜單項角色訪問模塊允許您將角色字段（可選）輸入到菜單項中。 它還支持 Drupal 9。

6. 芝士漢堡菜單

如果您認為漢堡包菜單很棒，請等到您查看芝士漢堡菜單。 Drupal 8 Cheeseburger 菜單模塊具有一些很棒的功能，不僅限於移動視圖，它還適用於桌面視圖和各種屏幕尺寸。 它使您可以靈活地選擇要出現在 Cheeseburger 菜單中的菜單項，還可以編輯菜單標題。 如果您使用 Drupal Commerce，您可以選擇在菜單中顯示購物車或商店電話號碼。 可以選擇分類法作為您的 Cheeseburger 菜單的結構。 Cheeseburger 菜單模塊也支持 Drupal 9！

7. 簡化菜單

Drupal 8 Simplify Menu 模塊允許您在 Twig 模板中渲染菜單。 它允許自定義菜單標記，以實現可訪問性並與標準兼容。 您可以將菜單樹渲染為樹枝模板中的數組，並完全控制菜單的數組。 此模塊尚不支持 Drupal 9。

8. Total Control 管理儀表板

Drupal 8 Total Control Admin Dashboard 是一個有用的管理導航工具。 它充當所有管理工具的集中中心。 儀表板顯示管理窗格和指向用戶、分類、菜單、內容類型、站點統計信息、視圖面板窗格等的快速鏈接。 可以進一步自定義視圖面板窗格。 該模塊也適用於 Drupal 9。

9. Footermap：一個頁腳站點地圖

顧名思義，Drupal 8 Footermap 模塊為您的 Drupal 網站提供了一個站點地圖，可以放置在頁腳塊中。 它允許動態生成站點地圖，並且可以輕鬆配置為支持翻譯和緩存。 您可以選擇要顯示的菜單、設置菜單級別限制（子菜單）、啟用菜單標題、編輯 CSS 以匹配您的站點佈局等等。 Footermap 模塊也適用於 Drupal 9。