Build a fully custom dropdown menu using Webflow's elements and interactions.
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
In this lesson
To create a custom dropdown menu, we're going to:
- Create the dropdown wrapper
- Create the dropdown trigger
- Create the dropdown content wrapper
- Build the interaction to toggle the dropdown
Create 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
NoteDesign tip
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.
Create 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
NoteStructure tip
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.
Style the hover state and change the mouse cursor of the trigger
You can style the hover state of the dropdown trigger so those who hover over the trigger feel invited to click it.
Learn more: Styling states
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.
Learn more: Cursors
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
- Add a background color if you want
Learn more: Overflow
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
- 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
Learn more
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)
You’ll use the same animations we’ll build below, only, at this point, select the dropdown wrapper and 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
NoteGood 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.
Resources