The Dropdown Menu Widget helps you to create custom buttons with drop-down menus. You can easily list out items in an interactive dropdown menu that allows customers to select the product or service which they would like to explore further.
Let’s look at each of the options in the “Dropdown Widget” below.
Install Dropdown Menu Widget for 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 Menu”
- Hover over the widget in the search results and click install
- Add your “Dropdown Menu” widget to any Elementor Page
Source Settings
Items Source
Select the item source for event list.
- Items
- Posts
- Meta Field
- JSON or CSV
- Gallery
- Terms
- Users
- Menu
General Settings
Button Text
Type text to show in the button.
Width
Select the width of dropdown menu.
- Inline Auto
- Full Width
Button Alignment
Select the alignment of button.
- Left
- Center
- Right
Show Button Icon
Show/Hide the button icon.
Button Icon
Choose an icon for button.
Keep Dropdown Active
It will keep the dropdown active.
Transition Duration
Set the transition duration in milliseconds.
Transition Delay
Set the transition delay in milliseconds.
Additional Settings
Item Hover Animation
Set the item hover animation from below options.
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
Items Settings
Manage the items of Dropdown Menu using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Label
Type text to show as label.
Link
Type or paste your URL to link.
Icon
Choose an icon to display.
Custom Colors
Set custom colors for item.
Dropdown Menu Widget Styling
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Button Styling
Style the button typography, padding, text color, background, and border.
Button Icon Styling
You can set the icon positioning, size, color, and gap.
Dropdown Wrapper Styling
You can style the dropdown gap, box shadow, border radius, and border.
Dropdown Item Styling
You can set the item gap, typography, padding, text color, alignment, and border.
Dropdown Item Icon Styling
In this section, set the dropdown item icon positioning, size, gap, color, and color hover.
Usage Examples
Here are some live use cases for the Dropdown Menu Widget.
