Skip to content

How to Create a Vertical Toggle Mega Menu in WordPress?

Updated On : September 27, 2026By : Reading Time : 1 minute

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.
Table of Contents

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.

LIVE BLOCK LINK

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

  1. Add the Navigation Menu block, set Type to Manual Menu and Menu Layout to Vertical Toggle.
  1. 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
  1. Set Toggle Open to Click or Hover, and enter the bar Title, such as All Departments.
Toggle Bar settings with Toggle Open and Title
  1. Choose the Prefix Icon and Toggle Icon, then save.

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

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before building a vertical toggle mega menu in WordPress?

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.

Why would I use a vertical toggle mega menu instead of a regular horizontal mega menu?

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.

How do I make the menu open on hover instead of click?

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.

Can I use a vertical toggle mega menu in a WordPress header template?

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.

What should I change if my toggle bar text or icons don’t fit my design?

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.

What’s the difference between Normal, Hover, and Click for the toggle menu?

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.

Last reviewed: September 27, 2026

Related Docs

How to Add a Form in WordPress?
icon
How to Add a Mobile Menu in WordPress?
icon
How To Add a Navigation Menu in WordPress?
icon
How to Add a Newsletter in WordPress?
icon
How to Add a Popup in WordPress?
icon
How to Add Cloudflare Turnstile CAPTCHA in WordPress Form?
icon
123………11