How can I make the menu close when a link is clicked in Webflow?
TL;DR
- Add a mouse click interaction to each nav link and trigger a "Close Menu" animation on the navbar.
- Test the interaction on different breakpoints to ensure it only affects mobile/tablet views.
To make a menu (navbar) automatically close when a link is clicked in Webflow, you need to use Webflow interactions to trigger the menu to close when a nav link is selected. Here's how to do it step-by-step.
1. Select the Menu Symbol
- Click to highlight your Navbar element.
- Locate the Menu Button (the hamburger icon typically shown on mobile) in the navigator or directly on the canvas.
2. Add Click Interaction to Nav Links
- Select the menu link inside your nav menu (do this for each link one at a time).
- Go to the Interactions panel (lightning bolt icon in the right toolbar).
- Click + next to Element Trigger and choose Mouse Click (Tap).
- Under On 1st Click, choose Start an Animation and click + New Timed Animation.
- Name it something like Close Menu.
3. Set the Action to Close the Menu
- In the animation timeline, click + and choose Navbar as the target.
- Scroll to the "Navbar" action section, then choose Close Menu as the action.
- Save the animation.
4. Apply the Interaction to All Menu Links
- Go back and select each remaining nav link.
- Apply the exact same Mouse Click trigger and assign the previously created Close Menu animation.
5. Test Across Breakpoints
- Use Webflow’s preview mode to check if the nav menu closes correctly on mobile/tablet views.
- Ensure that the menu doesn't wrongly apply this behavior on desktop where the menu is always visible.
Summary
To auto-close your menu when a link is clicked in Webflow, use a mouse click interaction on each nav link to trigger a "Close Menu" action on the navbar. Test it across all devices to ensure smooth behavior.