The Dropdown Menu shows a list of actions or links when the user clicks a button. It’s perfect for menus, filters, or quick settings.
It’s made up of a Dropdown Menu Wrapper with a few optional parts inside:
- Dropdown Title – a label for a group of items
- Dropdown Separator – a line to divide groups
- Dropdown Item – a regular clickable item or link
- Dropdown Trigger – an item that opens a submenu (another layer of options)
The Trigger has a slot where you can drop more items — allowing you to create multi-level menus if needed.
Usage
- Drag the Dropdown Menu Wrapper onto the canvas.
- Add Titles, Items, Separators, and Triggers inside the wrapper.
- Change labels, add icons, or make items linkable using the Component Properties.
- Use Triggers to open submenus and drop more items into them.
This gives you a clean, flexible dropdown — simple or advanced, depending on what you need.
GSAP powered interaction
“This dropdown menu uses Webflow’s new GSAP-powered Interactions. When the .popover_trigger is clicked, the .popover_content animates in (which hosts the dropdown menu), and clicking it again hides it with the same smooth effect. Inside the dropdown menu, hovering over the .dropdown_item-wrapper animates in the .dropdown_popover on hover in and out.