Creating a mega menu

  • mega-menu
  • navigation
  • menus
  • site-editing

A mega menu is a block-built panel that opens from a nav item. It has no public URL of its own — visitors only see it when the item is in a menu assigned to a location. Requires the Dirigible Mega Menu plugin.

Create a mega menu

  1. Go to Mega Menus → Add New Mega Menu.
  2. Enter a title — that title is the default label in the navigation.
  3. Edit the starter blocks, or replace them.
  4. Click Publish.

New mega menus start with a full-width Section and a Structured List (often set to a three-column grid of List Cards). Change those settings or swap in other blocks — the starter is a suggestion, not a lock.

Add it to a menu

  1. Go to Appearance → Menus.
  2. Open the Mega Menus box on that screen.
  3. Check the mega menu and click Add to Menu.
  4. Place the item where you want it in the header or mobile menu.
  5. Save the menu and confirm it is assigned to a location (for example, Primary).

You can add the same mega menu to more than one menu. Desktop and mobile items that point at the same mega menu share one panel.

For general menu structure (pages, labels, nesting), see Menu editing.

How it behaves

  • Clicking the nav item opens or closes the panel — it does not follow a normal page link.
  • Opening one mega menu closes any other that is open.
  • Clicking outside the item and the panel closes it.
  • On small screens, the open panel fills the space under the header.

Optional: Close on Scroll

Under Appearance → Customize → Dirigible Mega Menu → Settings, Close on Scroll closes an open mega menu after you scroll. It only runs when Sticky Menu or Floating Masthead is on under Header & Menus → Desktop. Leave it off if the panel should stay open until the visitor clicks again or clicks outside.

Tips

  • Keep the panel short enough to scan — a three-column list of links is the usual pattern.
  • Put the same mega menu on desktop and mobile menus instead of duplicating content.
  • Use the Section background when you need a color or image behind the links.