Webflow has a pre-built dropdown component which you can simply drag and drop into your navbar or anywhere on your page. This allows you to create a dropdown menu in seconds.
However, for those of you who’d like to have more control over how their dropdown menu is built, styled, and operates, in this lesson, we’ll teach you just that — how to build a custom dropdown menu!
Before you begin
- You'll be using div blocks to build the custom dropdown component
- You'll be adding some link blocks inside the dropdown content wrapper
- You'll also be using interactions to make the dropdown work — open and close when triggered
Building a custom dropdown menu
- Building the dropdown wrapper
- Building the dropdown trigger
- Building the dropdown content wrapper
- Building the interaction to toggle the dropdown
Building the dropdown wrapper
- Drag in your first div block from the add elements panel.
- Name your class. This one's going to be the "dropdown wrapper".
- Set a width value
- Change the position to: relative — this will allow you to absolutely position the "dropdown content" wrapper you’ll be building later. Learn more about positioning types and their uses.
When you set a fixed width value, make sure to set the max-width to 100% or below. That way, you’ll ensure that your element will not overflow the width of smaller devices.
You can also do the opposite by setting the width to 100% and the max-width to a fixed value like 500px or 1200px. This will ensure that your text lines aren’t too long on larger devices or your images won’t grow larger than their original resolution.
Building the dropdown trigger
- Add a second div block inside the dropdown wrapper — you'll do this in the navigator since the dropdown wrapper has no height on the canvas.
- Add a class to this div block, too. We’re calling it “dropdown trigger”.
- Drag a text block right into the drop-down trigger. Doubleclick to change the text.
- Add styling like a background color (or an image or a gradient) to the dropdown trigger div block
- Give your text some breathing room by setting some padding
You can put whatever you want in the dropdown trigger. You can even leave it blank. For example, you can include an icon or another text block that says close.
You can also style the hover state of the dropdown trigger so those who hover over the trigger feel invited to click it. Learn more about styling states.
Change the mouse cursor of the dropdown trigger — It might feel unnatural to you for the dropdown hover to show the regular mouse cursor. You can always select your trigger div block and change the type of cursor that’s used. For links, usually, you’d want to select the pointer cursor. Or, you can choose any type of cursor really.
Building the dropdown content wrapper
- Drag a new div block right into the dropdown wrapper and place it underneath the dropdown trigger.
- Create a class and name it dropdown content
- Set the position to absolute — this ensures that your dropdown doesn’t push around other content on the page
- Set the width to 100% so it takes up all the available space inside the dropdown wrapper
- Set the overflow to hidden — this will be helpful when you’re creating the interaction later. Learn more about the overflow property.
- Add a background color if you want
Adding some content
The content can be anything. Here, we'll add a few link blocks.
- Drag a link block from the add panel and drop it inside your dropdown content wrapper
- Add a class to the link block. We'll call this "dropdown link", you can call it anything you’d like.
- Change the display setting to block to make the dropdown link cover the full width of the dropdown content wrapper
- Add some padding on all four sides by holding shift and dragging
- Drag a text block right into your link block. To change the styling of this text, see styling the link text below.
- Copy the link block and paste it a few more times to create as many links as you need in your dropdown
- Doubleclick each text block to rename each dropdown link
- Link each link block to the relevant resource. Check out our guide on the various link settings you can set for link elements.
Styling the link text
Links inherit their style from the all links tag. So, changing the style of the text block nested in a link block will not override the all links text styles. To style the text inside a link block, you’ll need to style the typography of the link block itself.
- Select the link block (the dropdown link)
- Change the text color
- Change the underline (text-decoration) to None to get rid of the link underline
Building the interaction to toggle the dropdown
Now, you want to create an interaction that triggers on the selected element, and you want it to occur on mouse click (or tap). To build this:
- Select the dropdown trigger
- Create an interaction: element trigger: mouse click (tap)
But I want to toggle my dropdown menu on hover instead of click
You’ll use the same animations we’ll build below, only, at this point, instead of choosing click (tab), choose element trigger: mouse hover. Then, follow the steps below.
Open the dropdown
- Under on 1st click (on on hover), create a new animation. Name it dropdown open.
- Select your dropdown content div block
- Create the first animation action: size
- Set the height to zero (0 px). Since you set the overflow to hidden on the dropdown content, it simply disappears.
- Set this to initial state since you don't want the dropdown content showing up when the page loads
- Create the second animation action: size
- Set the height to auto — you can either type the word “auto” in the input and press enter. Or, click the unit on the right side of the input, and choose auto from the unit menu.
Close the dropdown
- Under on 2nd click (or on hover out), add a new timed animation. Call this one dropdown close.
- Select the dropdown content
- Create an animation action: size
- Set the height back to 0 px
Good to know
You can change the easing and adjust the duration of any of your animation actions to create a unique animation when the dropdown is toggled.
Check out next
Now that you’ve learned how to create a custom dropdown menu, you can expand upon this technique to create more complex components such as an Accordion which is super useful for creating an FAQ. Check out our video lesson on creating an accordion.
Also check out how you can create an interactive dropdown arrow that you can add to your dropdown and accordion tirggers.