Dropdown

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

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

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.

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.

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.

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.

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.

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.

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.