Divi Mega Menu
Create stunning, responsive, and content-rich mega menus using the Divi Builder you already know. No coding required.
Build mega menus in the Divi Builder
Divi Mega Menu turns a menu item into a large panel you design with Divi. Drop in any modules, assign it to a WordPress menu, and it opens on hover or click. It works with a Theme Builder header, on Divi 4 and Divi 5.
Menus that hold real page content
Design the dropdown like any other layout
The panel is a Divi layout. Sections, rows, images, buttons, and any other module go in it, styled the same way as the rest of the site.
On Divi 5 the panel can reuse a Theme Builder canvas. Menus you already built keep working on Divi 4.
- Any Divi module inside the panel
- Reuse a Theme Builder canvas
- Divi 4 and Divi 5
Attach it to the menu item it belongs to
Pick the WordPress menu and the item. A Theme Builder header is used on its own, so the panel opens under that item on hover or click.
- Choose the menu and item in the editor
- Or set it on the item under Appearance → Menus
- Default Divi header or a Theme Builder header
Tabs that swap the content beside them
Put vertical or horizontal tabs inside the panel. Hover or click a tab and the content next to it changes. Each tab can show an icon beside its title.
- Vertical or horizontal tabs
- Change content on hover or click
- An icon next to each tab title
Show the submenu next to its parent
Nest a WordPress menu inside the panel so child items sit beside the parent, instead of a long single column. Near the edge of the header, the panel stays on screen.
- A WordPress menu inside the mega menu
- Submenus beside the parent item
- Stays on screen at the edge of the header
Hover, click, and a pointer that matches the header
Choose hover or click, a fade or a slide, and a pointer above the panel. A short label such as Sale or New can sit on the menu item.
- Hover or click, with a delay if you want one
- Diamond, caret, arrow, and other pointer shapes
- A badge on the menu item
More that comes as standard
Lighter first load
Send the panels with the page, or fetch them after it loads when you have several heavy menus.
Load optionsPhones and fixed headers
Keep the mega menu on small screens, or use the normal Divi mobile menu, including a header that stays put while scrolling.
Mobile optionsMore than one language
Menus follow the language of the page with WPML or Polylang.
Translating menusReady-made layouts
Start from a free menu layout, then change the colours and content to match the site.
Free layoutsOpen it from a module
The same panel can open beside a Divi module, not only under a menu item.
Other ways to open itKeyboard and a close button
Tab through an open panel, press Escape to close it, and put a close icon on the panel.
Everything in the box
- Divi Builder panels
- Any Divi module
- Theme Builder header
- Theme Builder canvas
- Divi 4 and Divi 5
- Assign to a menu item
- Hover or click
- Full width or a set width
- Entrance animations
- Mega Tabs
- Vertical and horizontal tabs
- Icons on tabs
- Mega Drop-down
- Nested WordPress menus
- Menu badges
- Pointer shapes
- Underline the menu item
- Close icon
- Background overlay
- Load panels after the page
- Mobile menu fallback
- Fixed headers
- Keyboard navigation
- WPML
- Polylang
- Free layouts
- Open beside a module
- Mighty Header and Menu Maker
Divi Mega Menu
Annual
Lifetime
- 1 Site £14.99
-
- 1 Site £14.99
- Unlimited £74.99
Unlock the full power of Divi Engine
From £149 for unlimited usage
- Access to all our plugins
- Access to our courses
- Unlimited site usage
- Access to new products
