Close Mobile Nav — Close mobile menu when a link is tapped.

Already have a mobile navigation menu in Framer? Learn how to make it automatically close when users tap a link, perfect for scrolling one-page websites. This small UX improvement prevents confusion and keeps your interface clean.

Auto-Close Mobile Nav When a Link Is Tapped

If you’re building a mobile or one-page scrolling website, users expect the navigation menu to close automatically after selecting a link. In Framer, navigation menus stay open by default, which often blocks the content and causes confusion.

This tutorial teaches you how to add an auto-close behavior to your existing mobile navigation, no rebuilding, no code.

What You Need Before Starting

You already have:

• A working mobile navigation component

• Open/Closed states (or variants)

• Links inside the nav (Home, About, Services, etc.)

We will only add interactions, nothing else changes.

Step 1: Open Your Nav Component

1. Double-click your mobile nav to enter the component.

2. Locate the Default (Closed) Mobile and Open states (or variants).

Step 2: Add "Close Menu" to Every Menu Item

For each link inside your mobile open nav:

1. Select the link text (or the frame containing the link)

2. Go to Interactions

3. Add a transition on Click back to you mobile default or closed variant:

This ensures:

• Tap link → menu closes

• Page scrolls to the selected section

• No manual closing needed

🎉 Final Result

Your mobile nav now behaves like modern apps:

• Tap a menu item → menu hides automatically

• Smooth scroll to the section

• No code required