Using the Dropdown component in Webflow

Overview

Adding a Dropdown menu is a very simple task, and can be used in a variety of circumstances. We’ve included a step-by-step guide below in adding a dropdown menu to a Navbar, however, they can be used outside of the Navbar component as well.

The Dropdown menu is made up of these components:

Dropdown Toggle: This is the main link/button that will open and close your dropdown.

Dropdown Link: These are the links that live within your Dropdown component. You can edit/add/remove these links in the Settings panel.

Dropdown List: The Dropdown List is the component that holds all of your Dropdown Links.

Adding a Dropdown Menu

STEP 1

The first thing is to simply drag in the Dropdown component located in the Component's section of the Add panel. In our example, we’ve dragged the component alongside our defaulted Nav Links in the Navbar component.

Example Adding Dropdown component to Navbar

STEP 2

Once the Dropdown component has been added, you can edit/add/remove the links inside the Dropdown menu. To do this, simply click the Open Menu button in the Settings panel when you’ve clicked on the Dropdown component.

In the Settings panel, you will also find the + Add Link button, which will automatically add a new link to the bottom of the Dropdown container.

STEP 3

It’s very easy to add a URL or link destination to each of your Dropdown links by simply allocating the destination in the Link Settings section of the Setting panel. Here you can choose where the Dropdown link will go to (a unique URL, a different page on your site, etc).

STEP 4

Once you have your links are in order and as you want them, you can add styles to each component of the Dropdown component.

To add styles, simply click on the portion of the Dropdown you wish to style (Dropdown Toggle, Dropdown Link or Dropdown List) and add a Class to it.

Also note that you can edit/style the Current class when the Dropdown Link is on the page/section in which it is linked to.

STEP 4

That’s it! Once you’ve added and styled all of your Dropdown pieces, it is ready to be used on your website. The Dropdown component will work on all devices, and plays nicely within your component.