Mega Menus are a type of website navigation that drop-down as a wide section with navigation links grouped into sections and columns when a top-level menu item is clicked or hovered over. The added size of megamenus means that they can also include images, icons, tool-tips, forms, or WordPress widgets in addition to the standard text links. The real benefit of using a mega menu is that you can display a large number of menu links in a single section so that site users can access them all without the need to scroll to click on long lists of links that may become hidden off-screen.
There is a megamenu included for free in the Divi Theme by default and for many, this is a good enough solution to add longer lists and batches of site links. If the built-in mega menu is not what you are looking for there are also a number of 3rd party plugins that can give extra functionality and/or design options not available in the Divi mega-menu.
This post will give you an introduction to the built-in and 3rd party mega menu options that are compatible with the Divi Theme.
Why use a mega menu?
A mega menu is a great way to improve the user experience for your site visitors and allow them to navigate your website faster and more intuitively. You may want to look at using a mega menu if;
- The default drop-down menu or sub-menus have too many items to be viewed without scrolling the page
- You have many products or product categories that need to be in a menu
- You have many posts or pages that need to be in a menu
- Having your site links in 1 mega menu will make it easier for users to find links and navigate your site
1. Default Divi Mega Menu
Divi comes with an in-built mega menu that can be activated by adding a CSS class of mega-menu to a menu item in the WordPress dashboard menus section. This mega menu method is free, fast and requires no additional coding or plugins.
Steps to add the default Divi mega menu;
- Go to Appearances > Menus in your WordPress dashboard
- Under “Screen Option” check the CSS Classes checkbox
- Add a custom link to your menu and in the link settings for CSS Classes, add the class “mega-menu”. This is the link to open the mega menu.
- Add up to 4 sub-links to the custom link you just added and any sub-sub links to those as required
- Save your new mega-menu
The default Divi mega-menu can have up to four columns, but as this tutorial on Divi Theme Examples shows, you can customize the menu columns for 6, 7 or 8 columns.
Mega menus plugins built for Divi
The default mega menu will give you enough tools to create a basic menu but if you need some extra features then these free and premium plugins are available too.
2. Divi Mega Pro (Divi Life)
Divi Mega pro is a premium 3rd party Divi plugin sold by Divi Life that allows you to add mega-menu and/or mega-tooltips to Divi.
- Up or Down Display Direction (overridden if not enough room)
- Activate on mouse hover or click
- Exit on mouse hover or click
- Set mouse hover exit delay
- Add customizable close button
- Set the width of the menu or tooltip
- Trigger with menu items or any element using Divi’s CSS classes
- Predesigned templates included
1 site license costs $15, 3 site licenses cost $29 and unlimited site licenses cost $59 which all need to be paid annually to access updates and support. A lifetime unlimited site license option for this plugin costs $129
Developed by Divi Life
Price: $15 – 59 annually or $129 lifetime
3. Divi Mega Menu (Divi Engine)
Divi Mega Menu is a premium 3rd party Divi plugin sold by Divi Engine that allows you to add mega-menu to Divi using the Divi Builder.
- Create and modify the Mega Menu using the Divi Builder
- Add any Divi module to the menu (including Divi BodyCommerce modules)
- Control menu animation style and speed
- 1-time payment
A single site license costs (£7) $9.2, 2-5 site licenses cost $23.5 (£18) and unlimited site licenses cost $46 (£35).
Developed by Divi Engine
Price: $9 – 46 (£7 – 35)
4. Mhmm. – Mighty Header & Menu Maker (Be Superfly)
Mighty Header & Menu Maker is a premium 3rd party Divi plugin sold by Be Superfly that allows you to add mega-menu to Divi using the Divi Builder + a range of custom Divi menu builder features.
- Create Mega Menus using the Divi Builder
- Demo Header Layouts
- Swap Header, Menu & Logo per Page
- Swap Header, Menu & Logo per Device
- Includes many non-mega menu header options and features
- 1-time payment
1 live and 1 development site license costs $35 and unlimited sites license costs $65.
Developed by Be Superfly
Price: $35 – 65
5. Divi Mega Menu by Quadmenu
Divi Mega Menu by Quadmenu is a freemium 3rd party WordPress plugin developed by Quadmenu that allows you to add mega-menu to any WordPress website. The free version of the plugin has limited options and you also need an additional plugin for full Divi compatibility. The premium version is fully integrated with Divi already.
- Styling settings available in Divi customizer
- Compatibility with the Divi header layouts
- Menu style settings synchronized with Divi settings changes
- The free version requires Divi Mega Menu plugin for full compatibility (10,000+ installs)
- free options or 1-time payment
1 site premium license costs $15, 5 site licenses cost $30 and unlimited site licenses cost $60.
Developed by Quadmenu
Price: $0 – 60
Divi site examples using Mega Menus
Have you used any of these or another mega menu on your Divi website? If yes, drop a link in the comments and let us know which option you chose and if you are happy with how it works. More great examples may also be found in the Divi Theme Examples showcase gallery.