Framer / How to Create Fixed Navigation with Tab Animation (Easy)

(use promo-code "pro-yearly-partner" to get 50% off the pro annual subscription)

How to create a fixed header navigation in Framer with animated tabs. This sticky navigation adds a layer of interaction to any website and it's super easy. This uses a feature called scroll variants inside of Framer and doesn't require any code.

[antonfullerton]

I’ve not tried this yet but I’ve been stumped on this one for a few days, massive thank you for uploading this.

[BeDigitaal]

For sure the best upload of the day for me! please keep them coming, we need this !

[MichèleDekker-sj]

Thank you, super helpful and easy to follow tutorial! The information I'm missing is how to change the names of the items. ;)

[nmnshma]

Thanks Danny! Iwas trying to figure out how to do this for a client project, you saved me a bunch of time!

[UpAllNightDaily]

Great video! Straight to the point and easy to follow.

[yuliu]

Very useful and quick tutorial! Thank you very much

[KumailChangezi]

Simple, smooth, and effective! Great tutorial ❤️🔥

[anandojha]

It helped a lot Danny. Almost Lifesaver

[mattwhoworks]

Thanks man video was really helpful. keep them coming, cheers.

[will_avelar]

This animation works well in the preview but on a live site, does it create a new instance of the page with the section you selected? i.e when you click on Nav Item 1 then Nav Item 2 and let's say you want to return to page you were just on before this page. Would selecting the back button on the browser take you back to Nav Item 1 or straight to the previous page?

[Matte_Luke]

Thank you Danny! I have a question for you: how did you manage this navigation bar on the Phone view? Since I have more than 3 items, I've been trying to make it a scrollable bar on mobile, where the current Nav item is always centered and automatically scroll it horizontally when I scroll to the next page section. Do you know if there is a way to do this? Thank you again!

[TheKTUTOS]

hello, Framer is awesome . But the effect in nav is "fixed" instead "stiky", that worked for me.

[michaelreddington]

Great video and easy to follow... what about if you want to make the nav bar itself a component? How does the scrolling and linking work then?

[TanmayMhatre-iq]

How do we change the name of the Component, for example in your video you have mad Nav item to evry navbar component but can we change the name of the component?

[bastiux]

Thanks for you tutorial, very usefull, but when i create a component of my navbar to have a responsive variant of it, i lost all my links effect, do you have a solution for this ? 🧡

[svdovichenko]

Hey Danny great video! Is there way to do it when navigation is a component as well not only links? I tried to do it but could not figure out.

[josepdevillaret]

Danny i have a question. Im trying to make a header section that whenever you click it shows a variant that goes down. For example if i have a page of Jeeps, when i click models on the header id like it to expand to be able to show an interactive set of cars with customizations. The problem comes when i click it, it just won't expand and won't show properly... If you don't understand i can show you the page i'm creating on framer, cheers boss.

[majebell]

I loved it! Btw, what is the software / tool you use to record the tutorial? I love the effect and how it looks on screen. Thanks in advance!

[sarachang-pcds]

Very helpful, thank you for sharing!!=

[harshvaja]

This was so great n helpful bro. tnx ✨