Interactive Navigation Menu in Framer (No-code tutorial)

In this video, we'll guide you through the process of how to create interactive navigation menu that is interactive and updates based on the scroll sections. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website.

Chapters:
00:00 Preview
00:30 How to do Navigation Menu Component
04:05 How to add Variants to Component
08:16 Adding Scroll Sections
11:40 Adding Scroll Variants to Menu

Don't forget to like the video if you find it helpful and subscribe to our channel for more Framer tutorials and design inspiration.

_________________________________________________________

Find me on other channels:

________________________________________________________

If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!

[FloNocode]

You make a real video tutorial with powerful value ! Thanks so much fo that

[patrick_cui]

Thank you Toni, this is exactly what I'm looking for as a beginner.
Keep going, man.👍

[zoobeiden]

Man I was searching everywhere for this thank you 🤝

[hoopercraig]

This was great. However, I found once I added the scroll variant as the last step, and followed everything you did, clicking the tabs in the menu now causes the bg element to jump around while it scrolls from section to section.

[Alias-]

Great tutorial, thanks. The only issue with this is, that it behaves awkward when not clicking the next or previous item, but e.g. the last one when on top of the page. Because then, the hover state interferes with the variations that are set when sections appear. Anyway to prevent this?

[awaluddintogar]

Bro youre so awesome. I just found of your channel. Simple and straight to the point! Subscribed

Dont stop please

[Anotherfouad]

This is exactly what I was looking for ❤ thank you. Subscribed!

[stellazhou]

Hi Toni, thank you for the video! I have a question about using the same animation on different pages. When I link the tab to different pages instead of sessions on one page, the background animation under text becomes stuck and moves rigidly without any transition. Do you know how I can solve this issue?

[scottschoen]

Best order for me to understand would be showing what you will accomplish with steps>then show how and slow up and explain why each step is chosen

[MaxWeir]

Great tutorial, thank I’m getting into Framer and wondering do you have a basics video for newbies?

Also love the video editing too, how do you record this and especially the movements around the screen?

[RIP]

Hey, i tried to recreate the navbar and everything works fine. But the link styles destroy everything. How did you turn them off ? i cant see them in your menu

[JennaJams]

Thanks for the video! This is exactly what I was wanting to do for my portfolio website. Question, did you get a "nested links" optimization error when publishing the website? I dont know why I keep getting one

[tanay_sankhe]

Thank you for this tutorial, Toni. 🙌 How can we make this nav design responsive? Do we need to create a new component for the tablet and mobile version?

[alyanaqiyyah]

Is there a way to make the navigation bar smaller? I am trying to edit one for phone as well and the bar is way too big. It is perfect on desktop though, love the tutorial.

[Michael.design]

Nice one! Was wondering before how to do that moving background layer.
Now I know:) Is there a way tho to have it pixelperfect behind each section/label or is that just a matter of visually balacing the items..

[solidusmack]

How do i change the logo after creating different variants of the navigation bar?? Help please.

[luciaparedes]

Thank you for this tutorial, super helpful! I was wondering if there's a way to do this exact same thing but linking each element of the menu to other pages, instead of scrolling down to each section, while maintaining the fluid interaction of the green frame smoothly gliding across pages? It works fine when scrolling to a section on the same page but the interaction breaks when linked to a different page :( Thank you Toni!

[hackur-g]

can you make a guide on making this menu responsive on mobile

[manjirid]

I followed the same steps except I linked it to different pages on my website and it is not working. It only shows up on hover. Any reason this could be happening?

[oXxwoahxXo]

would there be a mobile version of the nav bar?