Browse the best free dropdown website templates. Then customize your template in Webflow without code.

Robin Granqvist

A simple but sweet wide dropdown staggered interaction. Powered by GSAP of course.

Wide Dropdown Interaction - 76/365

A simple animated dropdown component, powered by GSAP.

All components: https://shapedbyrobin.com/yoc

Simple GSAP Dropdown - 56/365

Funtown Studio

Funtown's Workspace

A scroll- or click-triggered timeline accordion with a sticky image panel that crossfades per checkpoint. CMS-driven fields include subtitle, heading, body copy, and image. Built with native Webflow interactions plus lightweight JavaScript.

Funtown Studio's Process Sticky Scroll Component

Baker Creative

Enhance native Webflow dropdowns with open-on-load, scroll lock, and custom close triggers.

Download and install the TooEasy Powerups Webflow App to start using this premium powerup on your next Webflow project.

Webflow App
https://webflow.com/apps/detail/tooeasy-powerups

Documentation
https://www.tooeasy.dev/powerup-docs/dropdowns

Premade Components
https://www.tooeasy.dev/components/overview

TooEasy Dropdowns

Francesco Castronuovo

Ever wanted your dropdowns in Webflow to open automatically?

Whether you’re building an FAQ, a course landing page, or a complex multi-page setup, this video shows you exactly how to make it happen — on page load, when a dropdown scrolls into view, or when a user clicks a link (even from another page!).

All with a simple custom attribute system. No libraries, no dependencies, no nonsense.

🛠️ I’ll walk you through:

✅ Open a dropdown on page load
✅ Open a CMS dropdown using a dynamic field
✅ Open multiple dropdowns (with scroll behavior)
✅ Add breakpoint control
✅ Stop auto-open after user interaction
✅ Open dropdown from a link or button (even across pages!)
✅ Component + code setup

👉 Watch on YouTube: https://youtu.be/rz1aFtuKNvs

How to Make Dropdowns Open Automatically On Load, Scroll Or Link Click

Rezaul Karim

Beautiful Section Design

Bradley Stallcup

A neat little concept that hides nav links as you scroll down and shows them on scroll up. Free to clone!

Minim Drop In Navigation Menu

Need to show off a team, but tuck their big ol' bios away? Maybe this will help?

Slick Team Accordions with Bios

Zoe Tang

Accordion / Drop down element. Taking it from of my design project https://rollix-bot.webflow.io/

[Cloneable] Accordion / Drop down

Wadood Hussaini

Swap images when user clicks or navigates between dropdowns with keyboard.

Dropdown image toggle

Timothy Ricks

CSS-Only Dropdown

Felix Gonzalo

Custom accessible dropdown or accordion that everyone can use, including people who rely on assistive technologies like screen readers. 

It includes special tags (ARIA attributes) that help explain how the dropdown works, such as whether it’s open or closed. 

It also allows you to use the keyboard to open, close, and move through the options, making sure it’s easy to navigate for all users.

Accessible Dropdown in Webflow

Memberstack

An interactive experience featuring dropdown components with a sleek design, customizable styles, and an intuitive interface, enhancing seamless navigation and user engagement.

Dropdown Component

Chintan Savaliya

Get the list of country, states and city in each dropdown. Show states based on country selection and cities based on state selection. There are also fallback values of "No states found" and "No cities found".

Repo used: https://github.com/dr5hn/countries-states-cities-database. Thanks Darshan 🙏

------------------------------------------------
Have a new project in mind? Let's chat -
🟢 https://cal.com/chintan/30min

Contact:
🌎 https://chintan.design
📭 hello@chintan.design
🐥 https://twitter.com/heyychintan
------------------------------------------------

Custom Country State & City Dropdown

Sarvadhi - Webflow Expert

Sarvadhi

A navbar, essential in web design, is a user interface at a webpage's top, aiding navigation through links, buttons, or interactive elements. Its key features include:

Navigation Links: Prominent clickable links for efficient user guidance.

Branding Elements: Often includes a logo or site name, reinforcing visual identity.

Dropdown Menus: Complex sites may have dropdown menus for additional navigation options.

Search Functionality: Some navbars have a search bar for quick content access.

Responsive Design: Modern navbars are responsive, adapting to various devices for a consistent user experience.

Styling and Customization: Designers customize appearance, aligning with the website's aesthetic through color schemes, typography, and interactive effects.

Fixed or Sticky Navbars: Design preferences dictate whether the navbar stays fixed at the top, remaining visible as users scroll, or scrolls with the content.

Navbar Cloneable collections

Matan Assulin

Pre selected drop down, for things like food delivery to implement a pick up/ delivery or drop off. Can use it as a location drop down. Uses attributes to build this custom pre selected drop down!

Pre Selected Dropdown

Sam Garcia

This website contains two different custom code options to customize your Webflow forms.

The Dropdown Form Conditional allows to display or hide an element based on the user selection on a dropdown.

The Contact Preference Conditional shows the relevant input field (phone or email) based on the selection the user mades when choosing in the dropdown.

To see both forms work, just choose an option on both dropdowns.

There are more instructions on the page settings custom code to help you set up the code to fit your choices or options.

If you need assistance setting up this code in your website feel free to send me a DM in X @samgarciadev

Sam.

Dropdown Form Conditional & Contact Preference Conditional

102976941

1038319252

gpt-4.1-nano

1070795817

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

{{count}} {{sites}} {{exceed}} client seat limit. Excess seats will be removed.

Client seats

Free guest access to client Workspaces won’t be available.

Guest access

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-4-5

1186914386

claude-opus-4-6

1274323923

140432223

1462086697

1506258256

1514009179

1567550242

1592612642

1609688815

1621889036

1631162196

1692956854

1726628865

173927913

1771795565

1863160016

1870758752

1905118106

1975670756

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2144870841

2167006968

2216482092

2250401860

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2493307210

2546957535

2624148589

2717840929

2789269995

2842505721

284989039

285302288

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

2940878268

3022611874

3023147062

3026881092

3070246498

307653616

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Join client workspaces for free and add up to 5 users from your workspace

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3220870747

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3452464914

3458155273

gemini-3-flash-preview

3497785011

3590523401

3591394191

3637361732

Content Brief Generator

Credentials Demo

Fibonacci Hammer

MCP Demo

Variables Demo

3661799733

3669004489

3737116140

3844506029

3879263312

Learn best practices for collaborating with clients in Webflow.

Sell your apps on the Webflow Marketplace.

Learn about structuring seats, roles, and permissions in your Workspace

Partner with Webflow to build your business alongside 2M+ creators and developers

Request access for your team to collaborate in a client’s Workspace.

Charge your client for a Site plan directly in Webflow.

Earn more by selling templates on the Marketplace.

Start building your site with AI, a prebuilt template, or from scratch.

Add your team members to start collaborating on sites.

Watch a quick intro to what you can build in Webflow.

3913199261

392490161

3934148661

3941255684

3956476210

3960693283

3972857978

4040286650

4063605209

4092459378

4092855684

4094645560

4103643638

4144203485

4178901499

4195171643

4206156914

4235582168

451433404

489463363

Free Dropdown website templates

Free Dropdown website
templates built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Free Dropdown website templates built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Free Dropdown website
templates built by the Webflow community