A Divi mega menu is a drop-down menu panel that is displayed when a top menu item is clicked or hovered over and allows you to add a large number of website navigation links to a menu panel that would not fit into a standard menu.

There is a free mega-menu built into Divi and there are a number of 3rd-party Divi mega menu plugins available to create advanced mega menus that offer extended functionality and or design options within a mega dropdown menu.

This guide will show you the 2 best options for adding a mega menu to Divi, which will be;

Option 1 – Use the built-in free Divi mega menu

The Divi Theme and Theme Builder come with built-in mega menu functionality that can be used with your Divi menu for free and it is worth considering before you start looking at any 3rd party Divi menu plugins.

To add a mega menu all you need to do is add a CSS class to any menu item in your menu dashboard to activate it into a mega menu.

This option is clean and simple but may not have certain advanced features of the premium mega menu plugins.

Divi mega menu without plugin

By adding a 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 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 websites, it will be all that is required.

These are the steps required to add a Divi mega menu using the built-in feature;

  1. In your WordPress dashboard and go to Appearances > Menus
  2. Add a new menu with up to 4 parent links with your sub-menu links within each parent
  3. Add a custom link to the menu to act as the mega-menu trigger link
  4. Drag your parent menu links & their submenu links under the trigger link
  5. Under “Screen Option” check the CSS Classes checkbox
  6. In your top trigger link settings for CSS Classes, add the class “mega-menu”
  7. Save your menu and you have an active mega-menu

Customizing the built-in Divi mega menu

The mega-menu has up to 4 columns by default but with a little extra coding, you can customize the Divi mega-menu columns further to have either 6, 7, or 8 columns. as shown in the tutorial on this Divi Theme Examples.

This Elegant Themes blog has a tutorial that shows you how to add images to the mega-menu for a more visual navigation experience.

Option 2 – Use a Divi mega menu plugin

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.

These Divi extensions for mega-menus listed below are created for the Divi theme.

1. Divi Mega Menu

divi engine mega dropdown menu

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

This plugin is available to buy via the Elegant Themes marketplace or via the developers’ website at Divi Engine.

Buy via the Elegant Themes official marketplace;

  • This plugin is available to buy via the Elegant Themes marketplace as an unlimited site license for $46.00.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.

Buy via the developer at Divi Engine

  • 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
: $46
More information

2. DiviMenus plugin

DiviMenus plugin for mega menus

The DiviMenus extension is a premium Divi plugin sold by Don Divi that allows you to create a wide range of menu types including a mega-menu.

  • Multiple menu types besides mega menus
  • 2 new Divi menu modules
  • Expanding menus with icons, images, or text.
  • Create links or trigger your layouts as popups
  • 100% Customizable design.
  • Fully Compatible with Divi and Visual Builder.
  • Predesigned templates included

Buy via the Elegant Themes official marketplace;

  • This plugin is available to buy via the Elegant Themes marketplace as an unlimited site license for $49.00.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.

Developer: Don Divi
Price
: $49
More information & buy

3. Supreme Mega Menu plugin

Divi supreme mega menu plugin

The Divi Supreme Mega Menu is a premium Divi plugin sold by Divi Supreme that allows you to add mega-menus to Divi. Divi Supreme is also the creator of the best-selling Divi Supreme Pro plugin so you can expect a quality product with support to go with it.

  • From the creators of #1 selling Divi plugin
  • Use WordPress menus
  • Hover or click triggers
  • Add badges to menu items
  • Show WooCommerce cart icon
  • Use Divi Library layouts
  • Vertical & Horizontal layout
  • 30+ Animations to choose from for your Mega Menu.
  • Custom Image & Icons
  • Mega Menu search feature

Buy via the Elegant Themes official marketplace;

  • This plugin is available to buy via the Elegant Themes marketplace as an unlimited site license for $39.00.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.

Developer: Divi Supreme
Price
: $39
More information & buy

4. Divi Mega Pro plugin

divi life mega pro plugin

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 a 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

Buy via the Elegant Themes official marketplace;

  • This plugin is available to buy via the Elegant Themes marketplace as an unlimited site license for $79.00.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.

Price: $79
More information

5. Mhmm. – Mighty Header & Menu Maker

be superfly menu plugin

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 and logo per Page
  • Swap Header, Menu & Logo per Device
  • Includes many non-mega menu header options and features
  • 1-time payment

Buy via the Elegant Themes official marketplace;

  • This plugin is available to buy via the Elegant Themes marketplace as an unlimited site license for $46.00.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.

Price: $59
More information

Some final thoughts on mega menus

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. So, you should use a mega menu when the links you need to add to a menu do not fit or do not fit in a way that can easily be navigated. Mega menus can be a great way to improve the UX (User Experience) for your visitors navigating your website.

Mega menus can however sometimes offer users too much choice and distract them from clicking on 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.

Using a mega menu can improve the way your site navigation functions and how quickly your site visitors can access the information they are looking for.

You may want to consider using a Divi 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 stores)
  • 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

For most simple websites you will not need a mega menu, but for those that do the built-in free option with Divi is a great option that is free, doesn’t need a plugin, and is easy to set up. It is the best option for most people so give it a try first before thinking about using a mega menu plugin.

For those needing extra features without the ability to build a mega menu yourself with code, the 3rd party mega menu plugins offer a nice plug-and-play option too. If you buy via the official Elegant Themes website there is a 30-day money-back guarantee so give them a try and see if they meet your needs.

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.

4.7 20 votes
Article Rating