With the Sub Link Type, you can build powerful multi-level dropdowns and mega menus using native WordPress menus or fully custom Divi layouts. This is perfect for advanced navigation and complex layouts in DiviMenus Flex.
Available In
DiviMenus Flex module
Overview
The Sub Link Type lets you add a Divi Layout or a WordPress Menu as a sub-element to a Menu Item. This makes it the preferred method for building:
Dropdown menus
Mega menus
Sublevels in navigation systems
When activated, the submenu appears on hover or click, depending on your configuration and menu orientation.
This is the same behavior used in the Elegant Themes website menu.
How to Use
In the Menu Item settings, open the Link toggle.
Select Sub from the Link Type dropdown.
Choose between two Sub Sources:
Divi Layout: Load a layout from your Divi Library.
WordPress Menu: Load a native WordPress menu.
Content → Link Fields
Sub Source:
Divi Library: Select a saved layout. This is great for mega menus with columns, blurbs, images, etc.
WordPress Menu: Choose any menu defined under Appearance → Menus.
Preview in the Builder: This toggle allows you to preview Divi Layouts or WordPress menus in the Visual Builder. For the best accuracy, always preview in the front end after saving.
Display Behavior: Depends on the DiviMenu orientation:
Horizontal Menu: Submenus appear over the page on hover and disappear on hover out.
Vertical Menu: Submenus appear inline on click and stay open until toggled again.
Use Custom Display: Customize the default behavior:
Over page on hover (horizontal default).
Over page on click.
Inline on click (vertical default).
These behaviors can be set per device with responsive controls.
Sub Width: Set a custom width for the submenu (Divi layout or WordPress menu). Use px or % values. This is recommended for pixel-perfect mega menus. If no width is set in the layout itself, the sub will inherit the Menu Item width unless overridden here.
Sub Offset: Set the distance (default: 10px) between the Menu Item and its submenu. This is responsive.
Collapsible (WordPress Menus Only): Collapse/expand submenu items within the WordPress Menu. You can define custom open and close icons. If a URL is set on the parent item, the submenu opens via the collapse icon. If no URL is set, clicking the item toggles the submenu.
Accordion: Enables an accordion effect. When one submenu opens, others at the same level close automatically.
Show Arrow: Enable a small arrow pointing to the Menu Item. You can then set:
Arrow Direction: Up (default) or Down
Arrow Offset: Position the arrow precisely
Open URL: If you enable this, clicking the Menu Item will open a URL (rather than showing the submenu), while hover can still reveal the submenu. This option doesn’t work on touch devices due to the way taps are handled.
Enable Active State: This option activates the Menu Item (with hover styles applied) when the current URL matches the one in the URL field.
Design Options
Sub: Used to style WordPress Menus only. Divi Layouts should be styled inside the Divi Library:
Menu Item Background: Set a background color
Menu Item Padding: Top, bottom, left, right
Sub Menu Item Padding: Padding only for nested items
Font: Customize font, size, weight, color, spacing, etc.
Alignment: Align the submenu as follows:
Left
Center
Right
Justify (Full Width)
Notes:
When shown over the page, alignment affects page width.
When shown inline, alignment affects the Menu Item width.
Arrow Color: Available only if Show Arrow is enabled. Set the arrow color (default: #fff).
Box Shadow (WordPress Menu): Adds a box shadow around the WordPress menu dropdown for depth and separation.
Enter Effect / Exit Effect: Add entrance and exit animations when the submenu appears or disappears. Supports standard DonDivi Custom Effects.
Advanced Options
Custom CSS: When using WordPress menus, you can apply custom styles:
WordPress Menu: Style the entire menu
WordPress Menu Item: Style all menu items
WordPress Sub Menu Item: Style only nested items
Collapse Icon: Customize icon size, color, padding, etc.