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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Dropdown Button”
- Hover over the widget in the search results and click install
- 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.
Items
You can use the item repeater field as item source.
WordPress Posts
Display WordPress posts dynamically in your dropdown button, including custom post types and fields for maximum flexibility.
Meta Field
Use Meta as an item source for your dropdown button to dynamically display and manage content from your Meta data.
JSON or CSV
Load the dropdown button with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for dropdown button to dynamically display and manage taxonomy terms from your WordPress site.
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.
Menu
Use your WordPress Menu as a source for the dropdown button to dynamically display and manage menu items in a visually engaging layout.
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
Button Text
Type text for button.
Width
Set the width of dropdown button.
Button Align
Set the alignment of button.
Show Button Icon
Show or hide the icon in button.
Button Icon
Choose an icon to display in button.
Keep Dropdown Active
It will keep the dropdown in open state.
Transition Duration
Set the transition duration for dropdown.
Transition Delay
Set the transition delay for dropdown.
Change Button Text To Selected Item
It will change the button text to selected item.
Close Dropdown After Selection
It will close the dropdown after selection.
Opens Links In New Tab
Links will open in new tab.
Additional Settings
Item Hover Animation
Select the item hover animation for dropdown button.
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
Items Settings
Manage the items of the dropdown button using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Label
Type text for label.
Link
Type or paste URL to link with button item.
Icon
Choose an icon to display.
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.