fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Layers Widget
Blog Template
January Updates

Dropdown Menu

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.

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

Source Settings

1

Items Source

Select the item source for event list.

  • Items
  • Posts
  • Meta Field
  • JSON or CSV
  • Gallery
  • Terms
  • Users 
  • Menu

General Settings

1

Button Text

Type text to show in the button.

2

Width

Select the width of dropdown menu.

  • Inline Auto
  • Full Width
3

Button Alignment

Select the alignment of button.

  • Left
  • Center
  • Right
4

Show Button Icon

Show/Hide the button icon.

5

Button Icon

Choose an icon for button.

6

Keep Dropdown Active

It will keep the dropdown active.

7

Transition Duration

Set the transition duration in milliseconds.

8

Transition Delay

Set the transition delay in milliseconds.

Additional Settings

1

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
1

Label

Type text to show as label.

2

Link

Type or paste your URL to link.

3

Icon

Choose an icon to display.

4

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.

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!