Hey Webflow team, the new Dropdown Component is great and I’m glad to see it as a standard feature within the webflow designer.
I have a few requests for it that maybe will make it into future versions.
Have the dropdown component work with :hover on desktop and on click for touch enabled devices automatically. I think it feels more intuitive when using a mouse to have dropdowns appear on hover. Maybe it’s just me but I’m sure someone else will agree with me.
Add simple animation and easing functions in the settings panel (like what’s available for the navbar component). I know we can do this ourselves with interactions but I’ve come across a problem with that; If you place in the navbar component and don’t add interactions, it works fine with a click and you can click anywhere on the canvas to get rid of the dropdown. However, with adding my own click interaction that has animation, I could only get rid of the dropdown by clicking only on the dropdown trigger.
Hopefully these things aren’t too difficult to implement. Keep up the great work guys!
We will look into hover as an option in the settings panel. This will probably not become the default, as the general consensus seems to prefer click-based menus.
Regarding animations, we originally built in navbar-style show/hide transitions but the result was far too limiting… especially in regards to nested dropdowns. Instead, we opted to provide an IX trigger that occurs when the menu is opened and closed.
You can find this new trigger in the Interactions “Choose Trigger” panel:
Can you guys please do a video on this? I have been trying to get an ease function for over an hour and It is not working. I tried applying it to the dropdown button and also the list itself and neither work correctly.
Hi @danro . Dropdown is working fabulous. However after working with it today I encountered these “bugs”:
Dropdown Toggle Open Menu
When I click the Dropdown Toggle and click on the „Open Menu” function in Default view, it automatically jumps to Tablet view when opening the dropdown list…
Box Shadow disappears in Tablet view and below
I’ve given the Dropdown List element a dropshadow in Default view. However, in tablet view and below the shadow is not visible under Shadows. I have to create a new dropshadow with the setting 0% opacity to make it disappear.
I’m also struggling to make the dropdown menu ease in and out when selected. Editing a dropdown interaction using 0-100% / 100-0% opacity (with dropdown open/close triggers) affects the text of the dropdown link in the nav bar itself, making it invisible by default, even when it’s only the dropdown list that I’m trying to apply the interaction to.
