A Mega Menu is a style of website menu that appears as a large drop-down menu panel with groups of navigation links that are displayed when a top menu item is clicked or hovered over. Different Megamenus can include images, icons, tooltips, forms, and WordPress widgets but the key feature of a mega menu is that it displays all the menu link options together in one area so users do not need to click sub-menus or scroll to access the site links hidden off the page.
Divi comes with built-in mega menu functionality (see item 1 below) and there are also a number of 3rd party Divi compatible plugins that have been developed to offer extended functionality and or design options within a mega dropdown menu. This article will list the best free and paid mega menu options available that are compatible with the Divi Theme.
When should you use a mega menu?
Mega menus can be a great way to improves the UX (User Experience) for your visitors navigating your website, but it may not always be necessary or even useful. Mega menus can sometimes offer users too much choice and distract them from clicking onto pages you really want them to view, such as product sales, contact, or signup pages. Mega menus can also be cumbersome on smaller screen sizes and look overly sparse when there are minimal links.
But, there are definitely times when using a mega menu will really improve the way your site navigation functions and how quickly your site visitors can access the information they are looking for. So, you may want to use a mega menu for any of the following reasons.
- A traditional drop-down menu and/or sub-menus would need to be scrolled to view all menu items
- Your site has a large number of products and/or product categories (online stores, department store)
- Your site has a large number of posts and/or pages (news sites, content aggregators, directories, universities)
- Adding a mega menu will help users navigate your site more easily
Divi includes a built-in mega menu
Before you start looking at any 3rd party Divi menu plugins you should know that Divi itself comes with a built-in mega menu. By adding a quick CSS class of “mega-menu” to your top menu item in Appearance > menus you can create a mega menu within Divi without the need for any 3rd party plugins or even any extra code. The built-in mega menu may not have as many features and options as some of the 3rd party plugins, but for many sites, it will be all that is required.
To add a mega menu using the built-in Divi feature you can follow the steps below;
- In your WordPress dashboard and go to Appearances > Menus
- Add a new menu with up to 4 parent links with your sub-menu links within each parent
- Add a custom link to the menu to act as the mega-menu trigger link
- Drag your parent menu links & their submenu links under the trigger link
- Under “Screen Option” check the CSS Classes checkbox
- In your top trigger link settings for CSS Classes, add the class “mega-menu”
- Save your menu and you have an active mega-menu
The mega-menu has up to 4 columns by default but with a little extra coding, you can customize the menu columns further to have either 6, 7, or 8 columns. as shown in the tutorial on this Divi Theme Examples.
This custom CSS to compact the design from Geno Quiroz will give you the benefits of the mega menu in a more space-saving style, and the Elegant Themes blog has a great tutorial that shows you how to add images into the mega-menu for a more visual navigation experience.
This mega menu option is included for free as part of the Divi Theme and Divi Builder plugin features.
Price: FREE
More information
3rd Party mega menus plugins compatible with Divi
If the built-in Divi mega-menu option is not suitable for what you need then the following free and premium plugins for adding mega-menus in Divi could be worth looking at further. The 4 plugins listed below are well-established and popular choices within the Divi community.
1. Divi Mega Menu (Divi Engine)
The Divi Mega Menu is a premium Divi plugin sold by Divi Engine that allows you to add a 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
There are various pricing options that include 1 site license for $9.2, 2 to 5 site licenses for $23.5 (£18), and unlimited site licenses for $46 (£35).
Developer: Divi Engine
Price: from $9 – 46 (Annual 1 Site £7, 2 – 5 Sites £18, Unlimited £35. Lifetime 1 Site £38. Unlimited £115)
More information
2. Divi Mega Pro
The Divi Mega pro is a premium Divi plugin sold by Divi Life that allows you to add mega-menu and 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
There are various pricing options that include 1 site license for $15, 3 site licenses for $29, and unlimited site licenses for $59 which would need to be paid annually for updates and support. A lifetime unlimited site license will cost $129
Developer: Divi Life
Price: $79 per year with unlimited website usage, a 30-day money-back guarantee, and 1-year support & updates.
More information
3. Mhmm. – Mighty Header & Menu Maker
The Mighty Header & Menu Maker is a premium Divi plugin sold by Be Superfly that allows you to add a mega-menu to Divi using the Divi Builder along with a full range of other Divi menu creation 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
There are two pricing options that include the hobbyist license for 1 live and 1 development site at $35 and hardcore license with unlimited sites at $65.
Developer: Be Superfly
Price: $59 per year with unlimited website usage, a 30-day money-back guarantee, and 1-year support & updates.
More information
4. Divi Mega Menu by Quadmenu
The Divi Mega Menu by Quadmenu is a freemium WordPress plugin developed by Quadmenu that allows you to add a mega-menu to any WordPress website. The free version comes with limited options and requires an additional plugin for full Divi compatibility while 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 the Divi Mega Menu plugin for full compatibility (10,000+ installs)
- free options or 1-time payment
There are various pricing options that include a free plugin with limited functionality and support, 1 site premium license for $15, 5 site licenses for $30, and unlimited site licenses for $60.
Developer: Quadmenu
Price: $0 – 60
More information
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. The best examples may also make it into the Divi showcase gallery.
Weirdly, I have been looking at the mega menu options a lot recently, and am struggling to choose between the options. Some offer a free version to test, but many don’t, and it’s hard to know if it will be exactly what you need without trying it. Hmm, I’m just going to have to bite the bullet. Thanks for the write-up!
I have been thinking of setting up a site where users can test-run all the Divi plugins. Any purchased on the official Elegant Themes website have a 30-day money-back guarantee so that may be a good place to start
I got Divi Mega Pro to create a menu with hover over picture effects for a furniture website. Sadly it can not handle it. The latest update completely broke everything. If you do not see good examples of their own plugin, I would be wary. Divi Mega Pro examples are painfully rudimentary for good reason. Support could not help and mostly unresponsive. No refund policy so I do not recommend.
Agree with this. I purchased a single license for the Mega menu pro and am very disappointed with the options. It’s very basic.
does it work with the extra theme? I am wanting a mega menu for my blog categories and a pop-up contact form.
i think most of these work with extra too
Groovy mega menu plugin is aslo compatible with DIVI theme and Extra theme. I did my choise on this plugin.
Thanks for this Tip, I’ve struggled with all other Mega Menus, but Groovy made me happy!
None of the above options, free or paid, are great options in my opinion. Having worked in WordPress forever, my criteria for plugins are 1. Number of downloads 2. Reviews 3. Recently updated 4. Number of resolved support issues. I need to know that a plugin is going to be reliable, have good support, and be around for a long time. I rarely touch a plugin under 100,000 downloads. Not worth it. Huge gap here for a good developer to come up with a good megamenu plugin. For now, I have to stick with Uber Mega Menu. It’s the gold… Read more »
Rightly or wrongly, lots of people prefer to use a plugin made specifically for Divi but yes I would agree with what you say. There are often better WP plugins available to do the same job as a Divi plugin. I might start to include WP plugin alternatives in any such roundup posts.
where I can find the mega menu layout?. I don’t want to use any plugin.
“To add a mega menu using the built-in Divi feature you can follow the steps below; In your WordPress dashboard and go to Appearances > Menus Add a new menu with up to 4 parent links with your sub-menu links within each parent Add a custom link to to the menu to act as the mega-menu trigger link Drag your parent menu links & their submenu links under the trigger link Under “Screen Option” check the CSS Classes checkbox In your top trigger link settings for CSS Classes, add the class “mega-menu” Save your menu and you have an active… Read more »
Hi there.
Do one of those plugins allows to create automatically a tab for each woocommercer products catégory with a a list of each product for the catégory and a small image ?
Thanks !
looks like quadmenu does, but i can’t work out the WooCommerce module is an addon for the main quadmenu plugin. id assume the Divi Engine one may also have the option but I would confirm with each of the developers