How can I close a dropdown in Webflow when clicking on a link?

To close a dropdown in Webflow when clicking on a link, you need to ensure the dropdown menu collapses after a user selects an option. Since Webflow doesn’t provide this by default, you’ll need to use custom JavaScript.

1. Add a Click Interaction in Webflow

• Select the Dropdown Link inside your dropdown menu.
• Go to the Interactions panel (lightning bolt icon).
• Click Create a new interaction and choose Mouse Click (Tap).
• In the interaction settings, select Start an animation and create a new animation.
• Add an Opacity to 0% and Move (Y translation) to -10px to mimic a smooth closing effect.
• Finally, ensure the dropdown closes by hiding the dropdown wrapper after a short delay.

2. Use Custom JavaScript (Optional for Immediate Closing)

If you want the dropdown to close immediately when a link is clicked, add this code in the Page Settings > Custom Code > Footer section:
```html

```

• Replace .dropdown-link with the actual class name of your dropdown links in Webflow.
• This script simulates a click on the dropdown toggle, ensuring the menu closes when a link is clicked.

Summary

To close a Webflow dropdown when clicking a link, you can use Webflow interactions to animate and hide it or apply a simple JavaScript snippet to handle it programmatically.