--- title: "How to Create a Vertical Toggle Mega Menu in WordPress?" url: https://nexterwp.com/docs/create-a-vertical-toggle-mega-menu-in-wordpress/ date: 2024-12-02 modified: 2026-09-13 lang: en author: "Aditya Sharma" description: "An “All Departments” button that opens a category list with mega panels saves space in busy headers. The Navigation Menu block in Nexter Blocks Pro combines the Vertical Toggle layout..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Vertical-Toggle-Mega-Menu-in-WordPress_-1024x519.jpg word_count: 220 --- # How to Create a Vertical Toggle Mega Menu in WordPress? ## Key Takeaways - Nexter Blocks Navigation Menu block creates a vertical toggle mega menu in WordPress when the Type is set to Manual Menu and the Menu Layout is set to Vertical Toggle. - Toggle Open offers three behaviors for the menu opening: Normal, Hover, and Click. - Toggle Bar settings let the user change the title, add a URL link, and adjust the Prefix Icon and Toggle Icon. An “All Departments” button that opens a category list with mega panels saves space in busy headers. The Navigation Menu block in Nexter Blocks Pro combines the Vertical Toggle layout with Mega Menu items. *For every Navigation Menu setting in one place, see the [Navigation Menu block guide](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-navigation-menu/) ## Before You Start - **Edition:** **Pro** — Mega Menu needs Nexter Blocks Pro.- **Block to enable:** Navigation Menu, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Patterns for the panels:** create them under **Nexter > Patterns**. ## Steps - Add the **Navigation Menu** block, set **Type** to **Manual Menu** and **Menu Layout** to **Vertical Toggle**. - Add top-level items at 0 Level and Mega Menu items at 1 Level with a pattern in **Select Pattern**. ![A Mega Menu item with Select Pattern chosen](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-mega.webp) - Set **Toggle Open** to **Click** or **Hover**, and enter the bar **Title**, such as All Departments. ![Toggle Bar settings with Toggle Open and Title](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-vertical-toggle.webp) - Choose the **Prefix Icon** and **Toggle Icon**, then save. ![A vertical toggle mega menu opened from its title bar](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-vertical-toggle-ss-demo.gif) ## How It Behaves - Only the title bar shows until visitors click or hover over it; then the category list appears.- Opening a category shows its pattern panel. ## Limitations - **Pro only.**- With Toggle Open set to Normal, the list is always open. ## Troubleshooting ### Nothing opens when I click the bar Check **Toggle Bar** is on and Toggle Open is Click or Hover. ## Related Docs - [Create a mega menu](https://nexterwp.com/docs/create-a-wordpress-mega-menu/)- [Create a vertical toggle menu](https://nexterwp.com/docs/create-a-wordpress-vertical-toggle-menu/)- [Navigation Menu block: all settings](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before building a vertical toggle mega menu in WordPress?** A: Nexter Blocks has to be installed and activated, because the Navigation Menu block is part of Nexter Blocks. The tutorial also assumes you already have the menu patterns set up, just like a horizontal mega menu, and that you’re adding the block into a header template. If you’re creating that header template from scratch, the page points to the free Nexter Builder as the way to do it. **Q: Why would I use a vertical toggle mega menu instead of a regular horizontal mega menu?** A: A vertical toggle mega menu is useful when space is tight. The page calls out two practical benefits: it saves space and gives the header a cleaner, more modern look. That makes it a better fit when a wide horizontal menu would feel crowded or eat up too much room in the layout. **Q: How do I make the menu open on hover instead of click?** A: The opening behavior is controlled from the Toggle Open section, which offers three modes: Normal, Hover, and Click. Hover is the right choice when you want the menu to appear without an extra tap or click, while Click is better when you want deliberate opening. That choice matters because it changes how quickly users can reach submenu content. **Q: Can I use a vertical toggle mega menu in a WordPress header template?** A: The tutorial is built around adding the Navigation Menu block to a header template, so that’s the intended setup. Nexter Blocks provides the Navigation Menu block for this workflow, and Nexter Builder is mentioned as the free way to create the header template. That combination keeps the menu where users expect it: in the site header. **Q: What should I change if my toggle bar text or icons don’t fit my design?** A: The toggle bar is customizable through three specific fields: Title, Prefix Icon, and Toggle Icon. The Title field changes the text shown on the bar, while the icon sections let you swap out both icons for something that matches your header style. If those details feel off, it usually means the toggle bar needs visual cleanup more than structural changes. **Q: What’s the difference between Normal, Hover, and Click for the toggle menu?** A: Normal keeps the menu always visible, Hover opens it when someone moves over it, and Click opens it only after an explicit click. That distinction matters because it changes both space usage and interaction style. For compact headers, Hover or Click usually makes more sense than Normal since Normal behaves more like a permanently open menu.