How to add a dropdown menu in Webflow?

Dropdown menus let you organize navigation links under a parent item, keeping your navbar clean while offering access to multiple pages. Webflow includes a built-in Dropdown component that handles the structure and interactions for you.

Using the Dropdown Component

Open the Add panel (A key) and navigate to Components in the left sidebar. Drag the Dropdown component into your navbar. It comes pre-configured with a trigger button and a dropdown list containing placeholder links.

Configuring the trigger

Select the dropdown trigger and edit its text — this is the label users see in the navigation (e.g., "Services"). You can style it to match your other nav links.

Adding and editing links

Inside the dropdown list, add, remove, or edit link elements. Each link can point to an internal page, external URL, or section anchor. Keep dropdown items concise — long lists defeat the purpose of a compact menu.

Styling the Dropdown

Style the dropdown trigger, list, and links independently. Key areas to style:

• Trigger — match your nav link styling (font, color, padding)

• Dropdown list — background color, border, shadow, border-radius

• Dropdown links — hover state, padding, typography

• Open state — the dropdown list has an open/closed state you can style separately

Select the dropdown element and look for the Open state in the States dropdown at the top of the Style panel. This lets you control the list's appearance when it's visible.

Dropdown Behavior Settings

In the element settings for the dropdown, you can configure:

• Open on — hover or click (hover is standard for desktop navs)

• Close delay — how long the menu stays open after the cursor leaves

• Animation — fade, slide, or no animation for the list appearing

Dropdowns on Mobile

Webflow's dropdown automatically adapts for mobile. On smaller breakpoints, dropdowns typically switch to click-to-open behavior. Make sure the trigger is large enough to tap on mobile and that the dropdown list is readable at smaller widths.

Building Custom Dropdowns

If the native component doesn't fit your needs, you can build a custom dropdown using a div structure and Webflow Interactions. Create a trigger element, a hidden list, and an interaction that shows/hides the list on hover or click. This gives full control over timing, animation, and structure.

The built-in Dropdown component covers most use cases and is the fastest path to a working dropdown menu in Webflow.