**Supreme Mega Menu For Divi Pro** (often part of the **Divi Supreme Pro** suite) is a powerful extension that solves one of Divi’s most common limitations: the lack of a built-in, flexible Mega Menu builder.
While Divi allows for basic mega menus via CSS classes, Supreme Mega Menu lets you design complex, media-rich dropdowns using the **Divi Builder** itself.
---
### 🚀 Key Capabilities
* **Full Divi Builder Integration:** You can create any layout in the **Divi Library** (using rows, columns, buttons, images, or maps) and assign it to a menu item.
* **WooCommerce Integration:** One of its standout features. You can show a real-time shopping cart icon with item counts and even display product grids directly inside the dropdown.
* **Click or Hover Triggers:** Unlike the standard Divi mega menu (which is hover-only), this plugin allows you to set "Click" triggers, which are much more user-friendly for tablet and mobile users.
* **30+ Animations:** Add professional entrance effects to your menus, such as Fade, Slide, Zoom, or Flip.
* **Menu Badges:** Easily add "New," "Sale," or "Hot" badges to specific menu items to draw user attention.
---
### 📄 Included Content Types
You are not limited to just links. With Supreme Mega Menu, you can include:
| Content Type | Description |
| :--- | :--- |
| **Divi Library Layout** | Any saved section/row from your library. |
| **WordPress Menu** | Nest a standard WP menu inside a column of your mega menu. |
| **Search Bar** | Add a sleek, interactive search field directly in the navigation. |
| **Images & Icons** | Place custom icons or product images next to menu labels. |
---
### 🛠 How to Set It Up
1. **Create the Layout:** Go to `Divi > Divi Library` and design your mega menu content. Ensure the section width is set to 100% for the best look.
2. **Add the Module:** Go to the **Divi Theme Builder** (Global Header). Add the **Supreme Mega Menu module**.
3. **Link the Library:** Inside the module, add a new "Menu Item." Under the "Content" tab, select **"Divi Library"** as the content type and choose the layout you created in Step 1.
4. **Customize:** Use the "Design" tab to adjust the dropdown width (Full Width or Custom Pixel width), animations, and mobile behavior.
---
### 📊 Comparison: Why Pro vs. Default Divi?
| Feature | Default Divi Mega Menu | Supreme Mega Menu Pro |
| --- | --- | --- |
| **Design Method** | Text-based / Custom CSS | **Visual Divi Builder** |
| **Triggers** | Hover Only | **Hover & Click** |
| **Media** | Links only (standard) | **Video, Forms, Products, etc.** |
| **Mobile** | Basic list | **Fully responsive custom layouts** |
---
**Would you like me to guide you through the CSS settings to make your mega menu "Full Width" across the screen, or do you need help importing one of the 13+ free pre-made mega menu templates that come with the plugin?**
Subscribe to access unlimited downloads of themes, videos, graphics, plugins, and more premium assets for your creative needs.
Published:
Jan 17, 2026 12:55 PM
Version:
v1.1.1
Category:
Author:
All In One PluginLicense:
GPL v2 or LaterTags: