a
M
DonDivi Builder logo

DonDivi Builder

The #1 Collection of Premium Divi Modules!

DonDivi Builder Modules:

Content Toggle

DonDivi Gallery - Icon White

Gallery

DonDivi Grid - Icon White

Grid

DonDivi Hotspots - Icon White

Hotspots

DonDivi Nav Menu - Icon White

Nav Menu

DonDivi Popup - Icon White

Popup

DonDivi Tabs - Icon White

Tabs

DonDivi Timeline - Icon White

Timeline

DiviMenus

DiviMenus

The #1 Menu Builder!

DiviMenus Extra Add-ons:

Floating

Floating

Sharing

Sharing

On Media

On Media

DiviMenus Family

DiviMenus & Family

Special Bundle!

DiviSignatures

DiviSignatures

Sign Emails with Divi!

DiviPasswords

DiviPasswords

Protect any Content!



Layouts

Get inspired and download them from your account.



Log In

Access your Account.
Not a member? → Sign up


Extra Tools

DonDivi plugins also include Exclusive Extra Tools.

i

Documentation

Learn and get the most of our plugins.

About Us

We create premium tools for improving your creativity.



FAQ & Support

How can we help you? Check our FAQ or submit a ticket.

Sub Link Type (Dropdowns & Mega Menus)

CSub Link Type
Overview
How it works
Sub Fields
Sub Style
Resources
URL Link Type
Popup Link Type
Show Link Type
Sub Link Type
Share Link Type

Sub Link Type

Available in:

  • DiviMenus Flex module (go back to the Divimenus Flex documentation).

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.

Sub Divi Library Link Type
Sub WordPress Menu Link Type

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).

Sub Link Type - Source

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.

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.

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.

Sub Link Type - WordPress Menu example

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.

a
DONDIVI
  • Plugins
    • DiviMenus
    • DiviSignatures
    • DiviPasswords
  • FAQ
  • Layouts
  • Youtube

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 sub menu will be displayed over the page elements on Menu Item hover and will disappear when hovering out the sub menu.

Please hover over these example Menu Items to see this behavior in action:

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
DONDIVI
  • Plugins
    • DiviMenus
    • DiviSignatures
    • DiviPasswords
  • FAQ
  • Layouts
  • Youtube

On the other hand, if the orientation is vertical, the sub menu will be displayed inline (or relative to) the page elements on Menu Item Click and will remain visible.

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
DONDIVI
  • Plugins
    • DiviMenus
    • DiviSignatures
    • DiviPasswords
  • FAQ
  • Layouts
  • Youtube

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 sub element (sub menu) 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.

These are the display options we currently offer:

Over the page elements when hovering

If you select this option, the sub menu will be displayed over the page elements when you hover over the Menu Item and will dissappear when hovering out the sub menu.

This is probably the most common behavior when it comes to display sub menus and you should be familiar with it. That’s also why this is the default display for horizontal Divimenus.

Over the page elements when clicking

This is similar to the previous one, but the sub menu will be displayed over the page elements when you click the Menu Item and won’t dissappear until you click the Menu Item again.

Please click the Menu Items to see the difference with the horizontal DiviMenu above.

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
DONDIVI
  • Plugins
    • DiviMenus
    • DiviSignatures
    • DiviPasswords
  • FAQ
  • Layouts
  • Youtube

Inline when clicking

If you select this option, the sub menu will be displayed inline (i.e. below the Menu Item and pushing down the page elements) when you click the Menu Item and won’t dissappear until you click the Menu Item again.

This is default display for vertical DiviMenus.

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

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
a
DONDIVI
  • Plugins
    • DiviMenus
    • DiviSignatures
    • DiviPasswords
  • FAQ
  • Layouts
  • Youtube

LEFT

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
a
DONDIVI
  • Plugins
    • DiviMenus
    • DiviSignatures
    • DiviPasswords
  • FAQ
  • Layouts
  • Youtube

RIGHT

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
a
DONDIVI
  • Plugins
    • DiviMenus
    • DiviSignatures
    • DiviPasswords
  • FAQ
  • Layouts
  • Youtube

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.

a
DIVI MEGA MENU
=

ABOUT DIVI

The Worlds #1 WordPress Theme & Visual Page Builder

=

LIVE BUILDER DEMO

Try Out The Drag & Drop Page Builder for FREE!

=

LAYOUTS LIBRARY

Preview 110+ Premade Websites & 880+ Premade Layouts

=

PLANS & PRICING

1 License. Unlimited Websites. Unlimited Users.
=

DIVI MARKETPLACE

Third Party Divi Modules & Themes

=

DIVI HOSTING

Fast WordPress Hosting For Divi
=

DIVI FACEBOOK GROUP

55k Facebook Members & Counting
=

DIVI MEETUPS

Attend or Organize a Divi Meetup
LEARN MORE ABOUT DIVI

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).

a
DONDIVI
  • PluginsC
    • DiviMenusC
    • DiviSignaturesC
    • DiviPasswordsC
  • FAQC
  • LayoutsC
  • YoutubeC

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:

DiviMenus - Sub Link Type - Show Arrow

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.

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
a
DONDIVI
  • PluginsC
    • DiviMenusC
    • DiviSignaturesC
    • DiviPasswordsC
  • FAQC
  • LayoutsC
  • YoutubeC

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.

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
a
DONDIVI
  • PluginsC
    • DiviMenusC
    • DiviSignaturesC
    • DiviPasswordsC
  • FAQC
  • LayoutsC
  • YoutubeC

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.

a
ALL PRODUCTS
=

DIVI ALL IN ONE THEME

The Worlds #1 WordPress Theme & Visual Page Builder

=

EXTRA MAGAZINE THEME

The perfect theme for bloggers and online-publications
=

DIVI BUILDER PLUGIN

Harness the power of Divi with any WordPress theme

=

BLOOM EMAIL OPTIN PLUGIN

The ultimate email opt-in plugin for WordPress
=

MONARCH SOCIAL MEDIA PLUGIN

Built to get you more shares and more followers.
a
DONDIVI
  • PluginsC
    • DiviMenusC
    • DiviSignaturesC
    • DiviPasswordsC
  • FAQC
  • LayoutsC
  • YoutubeC

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.

> Custom Effects

Design > Link > Exit Effect

This field will allow you to animate the sub element when disappearing.

> Custom Effects

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

Documentation

Access all the detailed information about our plugins and get the most out of them!

DonDivi Builder logo

DonDivi Builder

Content Toggle

DonDivi Gallery - Icon White

Gallery

DonDivi Grid - Icon White

Grid

DonDivi Hotspots - Icon White

Hotspots

DonDivi Nav Menu - Icon White

Nav Menu

DonDivi Popup - Icon White

Popup

DonDivi Tabs - Icon White

Tabs

DonDivi Timeline - Icon White

Timeline

DiviMenus

DiviMenus

Floating

Floating

Sharing

Sharing

On Media

On Media

DiviSignatures

DiviSignatures

DiviPasswords

DiviPasswords

Be Creative

Get inspired and create the coolest designs!

YouTube Channel

Layouts

Documentation

Join our Newsletter!

Thanks and Stay Tuned

Join


CONTACT US.

11 + 15 =






PLUGINS

DonDivi Builder
DiviMenus
Floating
Sharing
On Media
DiviSignatures
DiviPasswords

DONDIVI

DonDivi
About us
Layouts
Extra Tools
Documentation
FAQ

MEMBERS

Your Account
Affiliates
Changelog
License Renewal
Refund Request

Privacy & Terms

© DonDivi | From Spain with ♥