Dropdown Button 

The Divi Dropdown Button module allows you to add interactive dropdown items linked to URLs. It’s ideal for creating quick navigation menus, external resource links, or call-to-action menus that expand on click or hover.

How to add module on page

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

1. Create/Edit a Page/Post that uses Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP Dropdown Button module.

Add new dropdown item

Once the module is added to the page, you will see an option called “Add New Dropdown Item” in the Content tab.
Click the plus (+) icon to add a new item to your dropdown menu. Each item you add will come with its own content and design settings for full customization.

Content configuration

Item content settings

After adding a dropdown item, you can configure the following:

• Dropdown Item Text: The label or title of the dropdown item that users will see.
• Dropdown Item URL: The link where the user will be redirected when they click the item.
• Dropdown Link Target: Choose whether the link should open in the same tab or a new tab.

Item design options

Each dropdown item also comes with individual design controls under the Design tab:

• Link Font: Select the font family for the dropdown item text.
• Font Weight & Style: Choose bold, italic, or other styles to match your site typography.
• Text Color: Customize the link text color.
• Text Size: Adjust the font size to ensure readability and design consistency.

Spacing

In the Spacing section, the module comes with default padding:

• Top & Bottom: 10px
• Left & Right: 15px

You can customize these values to adjust the inner spacing around the dropdown items to suit your layout.

Global design settings

You also get a few global display options that control how the dropdown behaves and appears:

Button Text: Set the main button label that triggers the dropdown menu.

Trigger Action: Decide how the dropdown should appear on click or on hover.

Dropdown Direction: Choose the dropdown’s expansion direction bottom, top, left, or right depending on the position or need of your layout.