Dropdown Element

Interact with Webflow's Dropdown Element

Goals

• 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

Future;

• 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

Possible;

• Support selected item?

• Support multiple selected items?

• Support text entry, combobox

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

Features

Current features are simple;

Attributes

• Auto open on page load

https://discourse.webflow.com/t/how-to-get-dropdown-open-on-page-load-automatically/158399/16

wfu-dropdown-init = open | closed

API

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.

Demonstration

Dropdown

Demonstration

Webflow Smart Elements - WebflowWebflow Smart Elements

Cloneable

Usage Notes

wfu-dropdown

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 )

API

BETA. See the cloneable.

Notes

https://discourse.webflow.com/t/how-to-get-dropdown-open-on-page-load-automatically/158399/16

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.