Interactive Navigation Menu in Framer (No-code tutorial)

Live demo: interactivenavigation.framer....
Remix this project: framer.com/projects/new?dupli...
Get the Appverse template for free: tonjrv.lemonsqueezy.com/
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:
Twitter/X: / tonjrv
Instagram: / tonjrv
Threads: www.threads.net/@tonjrv
________________________________________________________
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!

[@patrick_cui]

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

[@tonjrv]

Awesome to hear that mate! I'll try my best 🔥

[@FloNocode]

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

[@tonjrv]

Amazing to hear that mate! 🔥

[@Anotherfouad]

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

[@tonjrv]

Awesome to hear that mate! 🔥

[@awaluddintogar1175]

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

[@tonjrv]

Awesome to hear that mate! 🔥 I'll keep going 🙌

[@softar1717]

Clean as usual broski

[@tonjrv]

Thanks bro! 🔥 🔥

[@prashant0251]

Thank you so much sir

[@tonjrv]

No worries at all mate! 🔥

[@IsraelOluwaleke-wt7yi]

Thanks bro😎

[@tonjrv]

No worries mate! 🔥

[@stellazhou3552]

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?

[@tahahussain5708]

I think you cant, as the browser has to load a whole new page and because of that new pages load instantly ie no smooth transitions. These types of animations work well on only apps when you have to move around pages as there is virtually no page loading delay

[@tonjrv]

Great question! And as mentioned above, at the moment there's no way to do that in Framer for multiple pages. Hopefully we found a solution for that at some point! ✌️

[@zingnolan]

Cheers mate

[@tonjrv]

No worries mare, I hope it's useful 🙌

[@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..

[@tonjrv]

Awesome to hear that! And great question, you can make it easily picture perfect when you go to those section variants, and tap from the section name inside the nav bar, and then hold the option key to measure the distance to BG layers edges, and then you can easily make the paddings picture perfect 🙌

[@Michael.design]

@@tonjrv Good one! Thanks! And keep up the great work😎

[@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?

[@tonjrv]

Thanks a lot mate! 🔥 I've been planning to do a proper "How to get started" video at some point, but haven't managed to do so yet. But you can find the "Framer for beginners | Tutorials" playlist from my channel that includes some videos that are perhaps bit more targeted towards beginners. And the video is recorded with Screen Studio, it automatically tracks your mouse movement and makes videos like this super easy to create! You can check more from here: screenstudio.lemonsqueezy.com?aff=zXV1p Btw, I'd love to hear if you have any specific video ideas in mind ✌️

[@luciaparedes9308]

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!

[@tonjrv]

Awesome to hear that! 🔥 And that's a good question, at the moment I think that it's not doable without any code component to achieve similar effect to different pages. But I'd be curious if someone here would have a solution for this!

[@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?

[@tonjrv]

No worries mate! 🔥 Yeah to make it responsive you can either do a new component or you can just do separate variants for mobile inside the same component

[@oXxwoahxXo]

would there be a mobile version of the nav bar?

[@tonjrv]

Great question! You can try to add a new variant and scale the nav bar bit smaller for the mobile. Or then you can just add a new variant and create a traditional navbar for 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?

[@tonjrv]

Unfortunately for the time being this only works on the same page, since when you change page the Framer loads the component again and therefore the animation doesn't work. You could perhaps make it so that the background is responsive to hover states and then when you change the page the transition feels smoother!

[@JAY001SF]

Hello Friend, Toni, This was awesome, Im a new website designer and I would like to lean this skill from you and in return I could do some simple time consuming things or grunt work, cold calling etc.. fixing websites. for you at no charge to show you as my skills grow to hopefully earn your trust for some bigger jobs in the furure. Could we talk about a paid training to teach me interactivive Navigation bars, I think this is an essensial skill ffor 2024 and onward and i wold be willing to pay for the training also. Please let me know if we can talk . Thank you Jay. Your the best , You are the only one I seen that shows this process.

[@tonjrv]

Thanks a lot mate, I appreciate your comment! 🔥 Unfortunately at the moment I'm also working as a sole designer, but I'll keep you in mind if I have expansion plans in the future. Keep it up mate!

[@JAY001SF]

@@tonjrv Thank you much

[@-The-Golden-God-]

This is so absurdly complicated compared to Elementor.

[@tonjrv]

Hey! That can be the case, do you have a resource showing how it's done in Elementor? If you haven't tried Framer I recommend you to try it out mate!

[@-The-Golden-God-]

@@tonjrv In Elementor, you just make a nav bar (drag and drop) then set an anchor point (drag and drop onto page) to each nav bar item. My first ever website was a simple one page layout with this kind of navigation and it only took a couple of minutes to set up. I've been messing with Framer since yesterday and it seems more convoluted than Elementor. The only thing I prefer about Framer is having the desktop, tablet and mobile layouts all visible at once. The free version of Framer apparently doesn't allow me to use my existing domain, which means I need to pay for Framer, on top of what I'm currently paying to host my domain. Elementor does this for free, as it's using Wordpress. Framer free also forces a banner. Elementor also benefits from a plethora of free 3rd party add-ons.

[@tonjrv]

Sounds nice! And does it animate the nav bar when scrolling?

[@-The-Golden-God-]

@@tonjrv I'm pretty sure that you can do it in Elementor Pro, but I use the free version. The free version definitely highlights the menu items, but I don't think it has the subtle transition animation. But as Framer free locks me out of key features, I wouldn't be able to utilise that tool anyway.

[@MrStuckone]

word of advice, too much zooming in and out and panning on the screen. I watch tutorials sped up and the constant movement is hard on the eyes

[@tonjrv]

Thanks for the feedback! I'll try to make it better in the upcoming videos 🫡