How do I add a dropdown menu in Webflow?

Add the dropdown and open the list

A dropdown is a toggle plus a list of links. The list stays hidden until someone uses the toggle. You will usually put it in the navbar, and you can also place it in another section. Open the Add panel, then Components, and drag Dropdown onto the canvas.

The toggle contains a text block and an arrow icon. To work on the links, select the dropdown, open the Settings panel, and click Menu, then Show.

Example: the navbar needs a Services label that opens Design, Care, and Contact. The default list already has three links. Change the toggle text from Dropdown to Services, then rename the three links to match those pages.

Point each link at a real page

With the list open, double-click a link and type the label. That edit also changes how wide the link is. Select the link and set the destination in the Settings panel. Drag links on the canvas, or in the Navigator, to reorder them.

Add another link with the Add link button, or copy and paste a link you already styled. Keep the list to pages that are still published. If a page has moved, point the link at the new path, or remove the link, so the menu does not send people to a missing URL.

If the word Services should also go to a page, while the arrow still opens the list, use the custom toggle from Webflow's dropdown article. Drag a text block into the toggle, delete the default Dropdown text, add 20 pixels of padding on all four sides of the new text, and set the toggle's left padding to 0. The text can be the link. The arrow opens the list. If the whole toggle is one link instead, a click leaves the page, so turn on hover for that pattern.

Choose click or hover

Click is the default. Turn on Open menu on hover when the list should open as the pointer rests on the toggle. The close delay is a number of milliseconds. It is how long the list stays open after the pointer leaves.

If the list closes before the pointer reaches a link, the gap is usually margin. Remove the top margin on the dropdown list, or the bottom margin on the toggle, or raise the close delay. Do not leave a tall empty band between the toggle and the first link.

While Show is on, a style change on the toggle adds an Open class. Use that class for the look of the open toggle, such as a different background. Style the links the same way you style other links: give them a class, then set Hover in the states menu if the row should change color under the pointer.

Keep the labels on the screen

Dropdown text does not wrap by default, so a long label can run past the menu and off a phone. Select the dropdown text, open Style panel, Typography, More text options, and set breaking to pre-wrap.

Webflow's accessible elements article says the dropdown needs a visible focus style on the dropdown toggle and on the dropdown links. Add that outline on the focused state. A visitor who tabs through the navbar should see which control is active before the list opens.

If this menu is part of the navbar, put the dropdown with the other links and, if you reuse that bar, keep it in the navbar component. On a tablet width, open the navbar menu button and confirm Services is still inside that menu. Then set the dropdown to Show and check that the open list does not cover a button people still need to reach.

Publish and try the menu on a phone

Publish and open the live site. Click Services, then click Design, Care, and Contact. Each one should land on the page you set. If hover is on, move the pointer from the toggle into the list and confirm the list stays open long enough to click Care.

On a phone, open the navbar menu, open Services, and read the labels. They should wrap inside the menu. If a link still goes to an old URL, update the link settings and publish again. Menu set to Show does not publish the list as stuck open. Show is only how you edit in the Designer. Visitors get a closed list until they click or hover.