Back to all lessons
Lesson library

Dropdown

Use the built-in Webflow dropdown component to add, style, and set up dropdown menus and links.

 
This video features an old UI. Updated version coming soon!

A dropdown menu is a pre-built navigation element that can be added to almost any area of a site. Most often you'll see a dropdown element in the navbar of a website. 

Adding a Dropdown Menu

To add a dropdown menu to your site:

  1. Open Add panel > Components
  2. Drag the Dropdown element onto your Webflow canvas
The Dropdown element is highlighted in the Components section in the Add panel.

Anatomy of a Dropdown Menu

Within the dropdown menu there are two child elements: the dropdown toggle and the dropdown list. The dropdown toggle consists of a text block and an arrow icon.

In the Navigator panel, the dropdown toggle and dropdown list make up the dropdown element.
The dropdown toggle is shown in the canvas.
The dropdown list is shown in the canvas.

Dropdown settings

The dropdown list isn't visible until the dropdown is clicked, but you can make it visible by selecting the dropdown, then going to the Settings panel and clicking Menu > Show.

The Menu is set to Show in the Dropdown settings of the Settings panel.

By default, the dropdown list appears when a user clicks on the dropdown toggle, but you can make it appear when the user hovers over the dropdown toggle by enabling the Open menu on hover option. The close delay time — the time it takes for the dropdown list to close after hovering out of the dropdown menu — can be adjusted in milliseconds.

Note: If you’re using Open menu on hover and your dropdown list closes before you can hover over it, there are 2 options to fix this. You can remove top margins on the dropdown list or bottom margins on the dropdown toggle or you can add a close delay.

Links inside Dropdown

Within the dropdown list there are three dropdown links. You can view and edit these by selecting the dropdown menu, going to the Settings panel, and clicking Menu > Open. You can double click inside the dropdown links to edit the text — this will also adjust the width of the link.

You can move the links around by clicking and dragging them on the canvas. Alternatively, you can click on the Navigator panel and drag the dropdown links around from there.

You can choose where each link will lead to through the Settings panel. You can also choose to add another link by pressing the Add link button, or you can duplicate a link by copy and pasting.

The Link settings section of the Settings panel is shown.
The Add link button is highlighted in the Dropdown settings of the Settings panel.
Custom dropdown toggle

To make the dropdown toggle a link:

  1. Drag a Text block from the Add panel into the dropdown toggle
  2. Delete the default “Dropdown” Text block
  3. Add padding (e.g., 20 pixels) to each of the 4 sides of the new Text block to make the clickable area larger
  4. Set the left padding of the dropdown toggle to 0

With this custom dropdown toggle, the text part acts as a link and the arrow part opens the dropdown.

If you want the whole dropdown toggle to be a link, check out how to create a custom dropdown and use a link block to create the dropdown toggle instead of using a div block. Note that in this case, you'll need to trigger the dropdown menu on hover since clicking the trigger will redirect you to the linked source.

The Open menu on hover checkbox is highlighted in the Dropdown settings of the Settings panel.

Styling the Dropdown and links

Styling the Dropdown works the same way as styling other elements — first give each element a class name and then start styling. 

There are 2 states that the dropdown can be in — Hide and Show. The Hide state is the default state when the dropdown is closed, and the Show state is when the dropdown list is visible. When you have Show enabled in the Settings panel and make a style change to the dropdown toggle or add a class to it, a special “Open” class is automatically added in the Selector field that allows you to customize that state.

You can also edit the Hover state for the Hide and Show states by clicking the Selector field dropdown and choosing the state you want to style.

A “Dropdown Toggle” class and an “Open” class appear in the Selector field of the Style panel.

To edit or style a dropdown link, select it in the Navigator. Alternatively, set the dropdown to Show, then select it on the canvas. 

You can also add a hover effect to the dropdown links:

  1. Select a dropdown link
  2. Open Style panel > Selector field and open the dropdown
  3. Choose Hover from the States menu

Once selected, a “Hover” class will appear. Any changes made with the Hover state selected will only be visible when the dropdown link is hovered over.

The States dropdown is expanded and the Hover option is highlighted in the Selector field of the Style panel.
Good to know: By default, the dropdown text doesn't wrap and may overflow the dropdown element and the page on smaller devices. To prevent this, select the dropdown text, open Style panel > Typography > More text options, and set breaking to pre-wrap.
Try Webflow — it's free