A powerful menu builder that brings the coolest designs and popups to Divi. Though it's called "DiviMenus," it's more than just a menu module; it can create grids, tooltips, popups, buttons, social sharing, filters, and more, all using a menu-like builder. You can even create multi-step logic, sublevels, or anchor links.
Installation
DiviMenus is part of the DiviMenus extension. If you've purchased through the Elegant Themes Marketplace or DonDivi, you can install the downloaded ZIP file as a normal WordPress plugin.
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the zip file.
Click on the Install Now button.
Two new modules appear in the Divi Builder:
DiviMenus
DiviMenus Flex
DiviMenus Flex uses CSS Flexbox to let the browser position the elements, recommended for typical row/column or linear menus.
DiviMenus (this module) positions elements with absolute coordinates, perfect for circular, radial, or advanced custom menus with text near or around the icons.
Pick whichever approach suits your project.
Overview
The DiviMenus module allows you to create a custom menu with a Menu Button (the main opener/closer) and multiple Menu Items. Even though it's called a menu, you can use it for many interactive layouts in Divi:
Unique static or pop-out menus.
Circular or radial menus.
Sublevel or multi-step toggles.
Social sharing, filter systems, or tooltips.
Popups (via link type).
Anchor links, grid layouts, or custom navigation.
You can place these anywhere on the page, inline, or floating over content.
DiviMenus is fully responsive and supports Divi's dynamic content, hover options, and the Visual Builder.
Important Note:
DiviMenus is not meant to render your existing WordPress menus. It's a powerful tool for building brand-new, custom menu-like elements.
Getting Started
Add the DiviMenus module to your page using the Visual Builder.
In the module settings, click Add New Menu Item to create your first item.
Start customizing the layout, style, and link types for the menu button and the items.
DiviMenu Settings
A DiviMenu item has:
Menu Button (the opener).
Menu Items (clickable elements that do different actions).
You can add or remove as many Menu Items as you want.
DiviMenu Shapes:
Content Tab → DiviMenu
DiviMenu Shape: Choose the overall arrangement (horizontal, vertical, radial, circular, etc.). This directly affects the placement of the Menu Button and Items.
Show Opened: If enabled, the menu opens fully. Otherwise, it is initially closed, and clicking or tapping the Menu Button opens it.
Display Inline: By default, the menu is shown inline (it takes up space in the layout). Turning this off displays it absolutely over the page content.
Equal Height Opened/Closed: If the menu is inline, it can adjust its height automatically or maintain the "opened" height even when closed.
Bring to Front: If menu items risk being hidden behind other elements, enable this to raise their z-index. This is usually not needed unless items overlap in the layout.
Background: You can assign a background color or image to the entire DiviMenu. Corners adapt automatically to the shape, but you can override them with Square Corners if desired.
Design Tab → DiviMenu
DiviMenu Alignment: For horizontal or vertical shapes, choose Left, Center, Right, or Justify alignment.
DiviMenu Opening: The distance between the Menu Button and each Menu Item (or between items if linear). Default 25px.
DiviMenu Background: If you've set a menu background, this defines internal padding around the entire menu.
Menu Button
This is the primary toggle that opens and closes the menu. You can style it, hide it, or disable it to keep the menu always open.
Content Tab → Menu Button
Position: If you use a horizontal or vertical shape, choose whether the button should be First, Middle, or Last.
Type: Displays either Icon, Image, or Text.
Hide: If the menu is set to Show Opened, you can hide the button entirely, preventing user toggling.
Disable: The button is visible but not clickable.
Apply Hover Options: By default, Divi's built-in hover styles apply on hover. If you'd rather they apply only when clicked, choose On Click to produce a pressed style.
Menu Button Title
Show Title: Displays a text label near the button.
Menu Button Title: The actual text for that label.
Display (responsive): Always, Hover, or Hide.
Make Clickable: Toggling the entire label as an additional clickable area to open/close the menu.
Design Tab → Menu Button
Use Background: Toggle a background for the button. You can style color, corners, and borders.
Fit to Content: If the background is on and this is enabled, it automatically adjusts to the width of the textual content.
Resizing Effect: Optionally shrinks the button size when the menu is open.
Menu Button TEXT / ICON / IMAGE: Fine-tune font, icon color/size, image scaling/opacity, etc.
Menu Button Title: Position (above, below, right, left), offset spacing, max width, background color, etc.
Spacing → Menu Button Background: The inner padding around the button's content. The default value is 15px.
Menu Items
These are the clickable elements that appear around the Menu Button. Each item can be styled or hidden individually, and they can open a URL, show a pop-up, or reveal an element. You can add as many items as you want.
Content Tab → Menu Items
Type: All items share a default type: Icon, Image, or Text. If needed, you can override each item individually.
Disable: Disable all Menu Items if you just want them displayed but not clickable.
Menu Items Title → Show Titles: If enabled, you can define how item labels appear.
Display (responsive): Titles can be Always, on Hover, or Hidden.
Make Clickable: The label text itself can be a link.
Design Tab → Menu Items
Background (required): Each item has a background color/shape.
Equal Backgrounds: If using text items, you can unify the background size. Otherwise, each item can scale individually.
Fit to Content: Adjusts item background to text width/height.
Menu Items TEXT / ICON / IMAGE: Global styles for text, icons, or images across all items.
Menu Items Title: Position and offset of labels. You can also add backgrounds, define fonts, or set multi-line titles.
Spacing → Menu Items Background
This controls the internal padding around each item's content. The default value is 15px, which can be overridden on an item-by-item basis.
Individual Menu Item Settings
Each Menu Item can override the global defaults:
Content Tab → Menu Item
Title: The item's name in the module's list. If you're using a text item, a separate field also appears for item text.
Hide (responsive): Temporarily remove the item on selected devices. You can optionally preserve its space.
Disable: Disable click actions for just this item.
Apply Hover Options: By default, item hover states apply on hover. You can switch to "On Click."
Link → Close DiviMenu On Click: If enabled, clicking this item closes the menu.
Link → Close Other Menu Items: If you have items set to "Show" content, enabling this option will close all others when you click or hover over one.
Link → Link Type
Determines the action:
URL: Open a link (it can be external or dynamic content, like a Divi post link). Optionally, enable Active State to highlight the item if it matches the current page URL.
Popup: Show a Divi Library layout in a popup. Great for modals. You can further style the location, background, overlay, max width, and animations under the Design Tab → Popup.
Show: Toggle an element's visibility on the page. Perfect for sublevels, multi-step flows, or revealing content. You define:
Element CSS ID/Class: The target(s) to reveal or hide.
Show On Hover: Triggers on hover (optional).
Toggle Visibility: If on, each click toggles the item's state show/hide.
Keep Visible: If off, showing a new element hides the old one.
Hide On Page Click: Closes the element when clicking outside.
Initial State: If you want the element hidden or visible by default.
Style Tab → Menu Item
Use Custom Styles for this Menu Item: This option allows you to override the global "Menu Items" style for the background, border, corners, Fit to Content, etc.
Menu Item TEXT / ICON / IMAGE: Specific overrides for text or icon size/color, etc.
Menu Item TITLE: The position and offset for the label of that item only. You can hide or show the label for just this item.
Animations
Popup or Show Link Types: Enter/Exit Effects can animate the element or pop-up shown. See Animations and Custom Effects for details.
DiviMenu Motion: You can also apply general motion or transitions to the menu as it opens, but that's typically done via the DiviMenus shape settings or custom CSS. The module also supports resizing effects for the button and some transitions.
Troubleshooting
Bring to Front is not working: If two overlapping DiviMenus have Bring to Front, they can conflict. Usually, only one should be in front.
If the popup does not appear, you need at least one layout in the Divi Library that does not contain another Menu.
Active State not applying: Ensure your item's URL matches the page's URL exactly and that you've applied hover styles for active highlighting.
CSS Selectors (Advanced)
Here are a few frequently used classes:
.dd-divimenu: Main wrapper.
.dd-menu-bg: DiviMenu background.
.dd-menu-button-content: The Menu Button itself.
.dd-menu-item-content: Each Menu Item's clickable area.
.dd-text: Text inside the items or button.
.dd-title: Titles (labels).
.active: Applied to items if they're in an active state (URL match, toggled on, etc.).