How can I make the menu close when a link is clicked in Webflow?
TL;DR
- Use Webflow’s default Navbar to auto-close menus on Nav Link clicks in mobile view.
- For custom links, add a click (tap) interaction that triggers a “Close Navbar” animation or hides the menu with opacity, scale, or display changes.
- Apply this interaction to all relevant links manually or via a shared class.
To make the menu close when a link is clicked in Webflow, you need to connect the link interaction with a Navbar menu close action.
1. Use the Default Webflow Navbar Element
- If you're using the built-in Navbar component, Webflow automatically closes the menu when a Nav Link is clicked on mobile (in collapsed mode).
- However, if you're using custom links (e.g., buttons or divs) inside the menu, they won’t close the menu by default.
2. Enable Menu Close on Custom Links
For custom menu items inside the mobile menu:
- Select the link or element inside your menu (e.g., a Button, Text Link, or Div).
- Go to the Interactions panel (lightning bolt icon).
- Click + next to Element Trigger and choose Mouse Click (Tap).
- Under On 1st Click, select Start an Animation.
- Click + New Timed Animation, name it something like “Close Menu”.
- Click + Action, then:
- Choose Navbar menu, then
- Choose Close Navbar (only visible if using the Webflow Navbar element).
- Press Done, and then Publish to test.
3. Manual Fallback for Custom Menus
If you're not using Webflow’s built-in Navbar:
- Create a similar Interaction on each link.
- The interaction should affect the menu container, animating its height, opacity, or display to hide it.
Example:
- On click, animate the menu wrapper to set display: none or change opacity/scale over 200ms.
4. Repeat for All Links
- Apply the same interaction to all links inside the mobile menu that should close it when clicked.
- You can duplicate the interaction and assign it to each one, or use a class-based trigger if they share the same class.
Summary
To close the menu when a link is clicked in Webflow, either use the built-in Navbar component, which handles it automatically for Nav Links, or create a custom click interaction that closes the menu on link click. Ensure the close action is linked to the Navbar menu element or custom menu wrapper.
