The “Toggle Dropdown Widget” allows you to create interactive dropdown menus or content toggles for free in WordPress Elementor websites. This widget helps improve navigation and user experience by displaying hidden content that expands with a click. You can customize the toggle button, dropdown style, animations, and colors to match your site’s design seamlessly.
Let’s explore the features of the “Toggle Dropdown Widget” below.
Elementor Toggle Dropdown Video Tutorial
Add a Free Toggle Dropdown to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Toggle Dropdown”
- Hover over the widget in the search results and click install
- Add your “Toggle Dropdown” widget to any Elementor Page
General Settings in Elementor Toggle Dropdown
Content Type
Select the content type:
- Text
- Image
- Template (Pro)
- Element ID (Pro)
Dropbar Settings in Elementor Toggle Dropdown
Trigger
Select the trigger for toggle.
- Click
- Hover (Pro)
Placement
Set the placement of dropdown element:
- Auto
- Auto Start
- Auto End
- Top Start
- Top Center
- Top End
- Bottom Start
- Bottom Center
- Bottom End
- Right Start
- Right Center
- Right End
- Left Start
- Left Center
- Left End
X Offset
Set the horizontal offset.
Y Offset
Set the vertical offset.
Dropbar z-index
Set the z-index of dropbar.
Hide on Body Click
Dropbar will hide when user clicks on the body of page.
Hide Dropbar if Button is Hidden
By turning this on, dropbar will be hidden if button is hidden.
Button Settings in Elementor Toggle Dropdown
Button Title
Type title of the button.
Show Icon
Show icon before/after the title.
Icon
Choose an icon to display in the button.
Different Active Icon
Choose a different icon to display on active state.
Button Transition Duration
Set the duration of button transition.
Animation Settings in Elementor Toggle Dropdown
Button Hover Animation
Select the hover animation for button.
Entrance Animation
Select the entrance animation for dropbar.
- In-Out Left
- In-Out Right
- In-Out Top
- In-Out Bottom
Entrance Animation Duration
Set the duration for entrance animation.
Debug Settings in Elementor Toggle Dropdown
Debug/Show Errors
Show/Hide the errors for debugging.
Hide Connected Elements in the Editor
Show/Hide the connected elements.
Elementor Toggle Dropdown Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. 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.
Dropbar Styling in Elementor Toggle Dropdown
In this section, set the dropbar width, background, border, padding, box shadow, and overflow.
Button Styling in Elementor Toggle Dropdown
You can set the button alignment, width, typography, padding, text color, background color, border radius and border.
Button Icon Styling in Elementor Toggle Dropdown
Set the button icon size, gap, color and shadow.
Content Styling in Elementor Toggle Dropdown
Here, you can set the typography, color, and shadow of the content.
Usage Examples for Elementor Toggle Dropdown
Here are some live use cases for the Toggle Dropdown Widget.
Free Toggle Dropdown for Elementor with Contact Details.
Free Toggle Dropdown for Elementor with Woo AJAX Search.
Thank you for using the Toggle Dropdown Widget for Elementor! With its smooth toggle effects and customizable design, this is the best Toggle Dropdown Widget for Elementor, perfect for creating interactive dropdowns that enhance navigation and user experience. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
