Dropdown Element ❺

Interact with Webflow's Dropdown Element


  • Make the dropdown element programmatically accessible to scripts, for open, close, toggle, query, item manipulation, and more

  • Add certain attribute-based common functionality as behavior modifications

    • Auto open on page load


  • Possibly replace the dropdown to allow for custom behaviors, like "sticky" behavior

    • Where the dropdown can only be opened/closed on script

    • Or specific behaviors like clicking the toggle

  • Item manipulation

    • Script-add / edit / delete items

    • Re-sort options

    • Keep WF dropdown working as normal

Data acquisition;

  • Designated data source

  • Filter state

  • Sort state


  • Support selected item?

  • Support multiple selected items?

  • Support text entry, combobox

  • Support quick selection filtering of available items e.g. countries


Current features are simple;


  • Auto open on page load


wfu-dropdown-init = open | closed


For developers, there is now an ability to manipulate a Webflow native dropdown through custom code, including;

  • open

  • close

  • toggle

  • query state

It's important to note that the Webflow dropdown behavior is to auto-close when anything outside of the dropdown is clicked. This means for example that if you create a button, and have the button toggle the dropdown, that;

  • The act of clicking the button will close the dropdown

  • The SA5 code triggered by the button will then detect it's closed and toggle it to open

Make sure to consider the effect of UX click interactions in your code design.


Usage Notes


REQUIRED. Identifies this dropdown element as one that should be managed by SA5.

Place this attribute on the dropdown element directly ( not the toggle element ).

wfu-dropdown-init = (action)

OPTIONAL. On page load, initialize the dropdown state to-

  • open

  • closed ( default )

Place this attribute on the dropdown element directly ( not the toggle element )


BETA. See the cloneable.



Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

Last updated