Streaming live at 10am (PST)

How to build an accessible dropdown in Webflow with custom code

Web accessibility is very important issue.

DEMO (Use tabs)

My code solve this missing features of Webflow dropdowns (Just Copy-Paste “before body”):

Keyboard Support

  • Tab key - Dropdown Toggle and Dropdown Links tabindex = 0 (Otherwise No way to tab/focus the dropdown)
  • Open/Close dropdown by enter
  • If Up Arrow or Down Arrow is pressed, the previous or next option is scrolled into view
  • Esc Button Close dropdown
  • home button (Select first dropdown link)
  • end button (Select last dropdown link)


  • aria-haspopup - for the dropdown button
  • toggle aria-expanded when show/hide dropdown

“The Problem”

This is “middle solution” (custom code) - VS webflow core solution - more lines of code // more complex + Hard to get support (If webflow overtime change navbar structure maybe this code will break + Not all users know JS).

Anyway - for now no other solution :frowning:


Please add her any bug you find. Thanks

Wishlist related:
In my opnion to broad wishlist topic (Its better to solve each component).

Solve all the ideas her:





copy-paste before body (No need to add any class or id under webflow site tree).

<!-- Webflow - accessible dropdown - Ezra Siton -->
<script src=""></script>

Way cool! Thank you for sharing!