Overview
This Link Type allows you to add either a Divi Layout or a WordPress menu as part of the element where this Link Type has been set. That means that you will be able to display sub elements when clicking or hovering over the main element (Menu Item).
This opens up a lot of possibilities related to sub menus! Therefore, this is the preferred Link Type when it comes to display dropdowns menus and mega menus.
You should be familiar with this way of displaying submenus since the Elegant Themes main menu follows this approach as you can see in the Elegant Themes menu that we have recreated using the Sub Link Type.
How the Sub Link Type works?
Even though using this Link Type is pretty straightforward, we are going to guide you through all the steps so you can see how this Link Type works.
First, you have to select the Sub option from the Link Type select.
If you are using the DiviMenus Flex module you must first enter the Menu Item that will show the submenu and open the Link module toggle.
Once you have selected the Sub Link type option for an item, you will be able to show the submenu by setting the following module fields:
Content > Sub Source
Choose the Divi Library option if you want to display a Divi Layout as a dropdown menu (you can use this option to display a mega menu).
Choose the WordPress Menu option if you want to display a WordPres menu as a dropdown menu (you can see an example here).
Content > Divi Library
Here you can select the Divi Library layout that you want to show as part of the item.
In the examples below we will use a row layout with several blurbs.
Content > WordPress Menu
Here you can select the WordPress menu that you want to show as part of the item.
You can see all the available WordPress menus in the WordPress Admin Page > Appearance > menus.
We have created for this documentation the following example menu.
This WordPress menu has four menu items. One of the menu items will contain a submenu with three menu items.
By default the WordPress menu inherits the Menu Item style and the menu width is 240px.
We will show you how to customize both the WordPress menu width and the WordPress menu style later in this documentation.
Preview in the Builder
You can preview either WordPress menus or Divi Layouts in the Visual Builder by using the Preview in the Builder field.
If you are previewing a Divi Layout, please take into account that styles can differ. The correct styles will be applied in the front-end.
We recommend that you enable that field to see how the dropdown menus will look in the front-end and disable it afterwards (once you have finished editing it).
Display Behavior
The display behavior will depend on the DiviMenu orientation:
If the DiviMenu orientation is horizontal, the element will be displayed over the page elements on Menu Item hover and will disappear when hovering out the element.
Please hover over these example Menu Items to see this behavior in action:
On the other hand, if the orientation is vertical, the sub element will be displayed inline (or relative to) the page elements on Menu Item Click and will remain visible.
Content > Link > Use Custom Display
This module field will allow us to customize the default display behavior that we have explained above.
For example, you may want to display the element over the page elements on Menu Item hover when the DiviMenu orientation is vertical. If so, this module field comes to our rescue.
The custom display can be set in the Custom Display responsive module select field that will be available after enabling this field.
Content > Link > Sub Width
You can set a custom width here and override either the Divi Library layout width or WordPress menu width.
If you haven’t set a width to your Divi Library Layout, the Sub will take the Menu Item width, so you will have to set a custom width here if you want the Sub to be wider than the Menu Item.
This field is responsive and we recommend that you use fixed units as pixels when displaying the dropdown (Sub) over the page content.
For the Divi Libray dropdown example (horizontal orientation), we haven’t introduced any values here since we have previously set the width in the Divi layout and that width worked for the purpose of this article, but we could have changed that width by entering another width values.
As for the WordPress menu dropdown (horizontal orientation), we haven’t introduced any values, since the 240px default width also worked for us.
We set a 100% width for tablet and mobile for both examples in vertical orientation so the dropdowns took up all the available space.
Content > Link > Sub Offset
The Sub Offset responsive field will allow you to set the distance between the Menu Item and the sub element (dropdown).
Default is 10px.
Design > Sub> Alignment
Here you can choose the aligment of the element.
CENTER
LEFT
RIGHT
JUSTIFY (FULL WIDTH)
If you are displaying the dropdown over the page content, it will take up all the screen width (since its position is relative to the page).
This can be rather useful to display fullwidth mega menus!
On the other hand, if you are displaying the dropdown inline, it will take up all the Menu Item width (since its position is relative to the Menu Item).
Please note that the width will be adjusted automatically either to the screen width or the Menu Item width, so you won’t need to use the Sub Width field for that.
Content > Link > Collapsible
This field is available for WordPress menus only.
Here you can choose whether the sublevels should be collapsed or not. If enabled, the Collapse Icon field will be available so you can set both a close icon (desktop value, default arrow down) and an open icon (hover value).
If you have not set a URL for the WordPress Menu Item you will also be able to open and close the submenu by clicking the Menu Item. Since we have set a URL, we will have to click the collapse icon to open the submenu (clicking the Menu Item will open the URL).
Content > Link > Accordion
This field is available for collapsible WordPress menus only.
This field will collapse previously opened submenus when a submenu from the same sublevel is opened. That is, this will create an accordion effect.
Content > Link > Show Arrow
Here you can choose whether an arrow should be displayed when displaying the Sub element over the page elemetns. If enabled, the Arrow Direction field will be available:
The Arrow Direction will allow you to change the arrow direction (upwards / downwards). If the arrow is upwards (default), it will be located at the top of the sub element. If the direction is downwards, it will be located at the bottom of the Menu Item instead.
We have set a box shadow to the WordPress menu for the sake of this example. We will show you how to style WordPress menus in the Sub Style chapter. In addition to that, we have also increased the WordPress menu offset to 20px for all devices.
Design > Sub> Arrow Color
Chances are that you may want to customize the arrow color. If so, you can use this module field.
This module field will only be available if the Show Arrow field is enabled.
The default color is #fff (white). Let us change the color for the WordPress menu example.
Content > Link > Open URL
This field will allow you to open the URL introduced in the URL field rather than showing a sub element (dropdown menu) when clicking the Menu Item.
This way you will be able to open a URL on Menu Item click and show the sub element on Menu Item hover.
Keep in mind that this option won’t work on touch screen devices (mobile, tablet, etc) in order to be able to show the sub element when tapping the Menu Item.
Also, if the Enable Active State toggle field is enabled, the Menu Item will become active when the introduced URL matches the current page URL.
Let’s update our example to open the DiviMenus Flex documentation on item click.
Sub Style
If you are using Divi layouts you won’t need any fields or previews here since you will be able to style the layout and see the final result in the Divi Library.
In case you are using WordPress menus, you will be able to style them from the Menu Item settings modal.
Design > Sub
We offer the following fields to override / style the WordPress Menu Items.
Menu Item background will allow you to set a custom background color for all the WordPress Menu Items.
Menu Item Padding will allow you to set custom paddings (top / bottom / left / right) for all the WordPress Menu Items.
Sub Menu Item Padding will allow you to also set custom paddings, but only for the WordPress Menu Items that are displayed in submenus.
Likewise, you will able to set the font, font style, text color, text size, letter spacing and line height for all the WordPress Menu Items.
Design > Box Shadow > WordPress Menu
This advanced field will allow you to set a box shadow for the WordPress Menu.
Design > Link > Enter Effect
This field will allow you to animate the sub element when appearing.
Design > Link > Exit Effect
This field will allow you to animate the sub element when disappearing.
Advanced > Custom CSS
The WordPress Menu field will allow you to set custom CSS for the WordPress Menu.
The WordPress Menu Item field will allow you to set custom CSS for all the WordPress Menu Items.
The WordPress Sub Menu Item field will allow you to set custom CSS for all the WordPress Sub Menu Items (Menu items that are inside a submenu).
Sub Link Type in action
Below, we are listing some resources that might be helpful for a better understanding of this Link Type.
Tutorials
Creating a Mega Menu: https://dondivi.com/documentation/creating-a-mega-menu/
DonDivi Layouts
SUB: https://dondivi.com/layouts/sub/
Working / Loading: https://dondivi.com/layouts/working-loading/
Elegant Themes: https://dondivi.com/layouts/elegant-themes/
YouTube
SUB Layout: https://www.youtube.com/watch?v=zeu2ouEucBE
Recreating the Elegant Themes menu: https://www.youtube.com/watch?v=LMluksCvvEg