Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Stacked Images - Featured Blog
ACF Repeater Field - Featured Blog
ue-update-1.5

Dropdown Button for Elementor

The Dropdown Button Widget is a versatile and dynamic tool designed to enhance your website’s user experience. This widget allows you to create customizable dropdown menus with various styling options and functionality, making it perfect for navigation menus, quick links, or any call-to-action you want to stand out.

Let’s look at each of the options in the Dropdown Button widget for Elementor below.

Add a Dropdown Button Widget to Elementor

This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Dropdown Button”
  3. Hover over the widget in the search results and click install
  4. Add the “Dropdown Button” widget to any Elementor Page

Source Settings

The Dropdown Button widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.

1

Items

You can use the item repeater field as item source.

2

WordPress Posts

Display WordPress posts dynamically in your dropdown button, including custom post types and fields for maximum flexibility.

3

Meta Field

Use Meta as an item source for your dropdown button to dynamically display and manage content from your Meta data.

4

JSON or CSV

Load the dropdown button with data from JSON or CSV files to easily manage and display structured content.

5

Gallery

You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.

6

Terms

Use Terms as a source for dropdown button to dynamically display and manage taxonomy terms from your WordPress site.

7

Users

You can use WordPress Users as an item source for your dropdown button to display and manage dynamic content from your site’s user data.

8

Menu

Use your WordPress Menu as a source for the dropdown button to dynamically display and manage menu items in a visually engaging layout.

9

API Integrations

Integrate an API into your dropdown button to dynamically fetch and display data from external systems or services.

To know more about multi source, Click here.

General Settings

1

Button Text

Type text for button.

2

Width

Set the width of dropdown button.

3

Button Align

Set the alignment of button.

4

Show Button Icon

Show or hide the icon in button.

5

Button Icon

Choose an icon to display in button.

6

Keep Dropdown Active

It will keep the dropdown in open state.

7

Transition Duration

Set the transition duration for dropdown.

8

Transition Delay

Set the transition delay for dropdown.

9

Change Button Text To Selected Item

It will change the button text to selected item.

10

Close Dropdown After Selection

It will close the dropdown after selection.

11

Opens Links In New Tab

Links will open in new tab.

Additional Settings

Item Hover Animation

Select the item hover animation for dropdown button.

  1. Grow
  2. Shrink
  3. Pulse
  4. Pulse Grow
  5. Pulse Shrink
  6. Push
  7. Pop
  8. Bounce In
  9. Bounce Out
  10. Rotate
  11. Grow Rotate
  12. Float
  13. Sink
  14. Bob
  15. Hang
  16. Skew

Items Settings

Manage the items of the dropdown button using the repeater field.

  1. Add new items
  2. Duplicate items
  3. Delete items
  4. Reorder Items
  5. Edit Items
1

Label

Type text for label.

2

Link

Type or paste URL to link with button item.

3

Icon

Choose an icon to display.

4

Custom Colors

Set custom colors for button item.

Dropdown Button Widget Styling

A variety of styling options are available, giving you complete control over the widget’s design. Select colors that align with your website’s aesthetic. You can customize the text, icons, fonts, and layout to ensure the widget looks and functions exactly as you envision.

Button Styling

Set the button typography, padding, text color, background, border radius and border.

Button Icon Styling

Style the icon positioning, icon size, color, and gap.

Dropdown Wrapper Styling

You can set the dropdown gap, box shadow, border radius, and border.

Dropdown Items Styling

Here, you can set the item gap, typography, padding, text color, background color, border radius, and border for dropdown items.

Dropdown Item Icon Styling

You can set the dropdown item positioning, icon size, gap, color, and color hover.

Dropdown Button Design Examples For Elementor

Here are some live use cases for the Dropdown Button Widget.

Dropdown button with contact details.

Dropdown button with app download links for different OS.

Thank you for exploring the Dropdown Button Widget documentation! We hope this guide helps you unlock its full potential to create engaging and functional dropdown menus on your Elementor-powered website. If you have any questions or need further assistance, our support team is here to help.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!