You’ve seen some pretty snazzy hamburger menu animations out there on the internet. And chances are, you’ve wondered if you can build them in Webflow—and if you can, how.
What if I told you that you can build many of those animations right in Webflow, using nothing more than the Navbar Open/Close interaction animation and a few divs?
You totally can. In fact, here are a few custom hamburger menu animations I created in Webflow.
Like what you see? Feel free to clone this project to use any of the hamburger menus on your own sites and learn how to build them.
How to build your own custom hamburger menus in Webflow
To build your own custom hamburger menus in Webflow, you’ll need the following ingredients:
- A Navbar component (includes a menu button)
Inside the Menu Button, we'll add divs for the hamburger menu icon's 3 lines, which we'll call:
- Top Line
- Middle Line
- Bottom Line
In the following walkthrough, we'll build this hamburger menu:
Step 1: Add a Navbar element to your design, and style the nav and menu button
Give your Navbar a class name and change its default background color to transparent by setting the opacity to 0.
Give your Menu button a class name and a set width and height. For this example, I’ll use 60px width and 60px height.
Step 2: Delete the hamburger icon and style the menu button
Delete the hamburger icon (the three stacked lines) from your menu button—we’ll be replacing them with our own design—and give the button whatever background color you’d like (in this example I used blue). Then remove the padding from your menu button by setting the padding to 0px on all sides.
Step 3: Start customizing your hamburger menu
Now add three Div Blocks to your menu button and give each of them a different class name. I used Top Line, Middle Line, and Bottom Line.
Give each div a set width and height (I used 40px width and 2px height on all three), then set their position to Absolute Top, and center them by setting the left and right margin to auto.
Add top pixels as appropriate for the positioning of each element. And be sure to set a background color too (I used white).
For my design, I’ll use the following top pixel settings to create 10px of space between each line:
Top Line: 18px from top
Middle Line: 28px from top
Bottom line: 38px from top
Here’s what the Styles panel looks like for my Top Line:
Step 4: Add a Navbar interaction to affect the lines in your hamburger menu
Select your menu button, switch to the Global Objects panel, and add a Navbar Interaction Trigger. Set the Navbar Interaction Trigger to affect a different element, and type in the class name of the element it should affect (in this example, Top Line).
Now, style the Navbar Open and Navbar Close states of the Top Line element. Check out the screenshots below to see how I styled the interactions for all three lines.
With the Top Line interaction defined, repeat the above steps for each line in the menu (Top Line, Middle Line, Bottom Line).
By now, the Interactions section of your Global Objects panel should look similar to the screenshot below, with 3 Navbar Triggers that affect other elements:
Top Line Open State
Top Line Closed State
Middle Line Open State
Middle Line Closed State
Bottom Line Open State
Bottom Line Closed State
Step 5: Preview the design and interactions
Switch over to Preview Mode to make sure the elements are behaving as expected and make any tweaks you might need.