How to Build a Navbar with Active Link Highlighting in Framer

Опубликовано: 16 Июль 2026
на канале: Adi Purdila
1,095
24

Build a scroll-activated navbar in Framer with active link highlighting. Perfect for single-page websites or long-form pages.
⚡Build awesome websites with Framer: https://framer.link/adipurdila

Subscribe to my channel for more awesome videos:    / @adipurdila  

⏱️ Video chapters
00:00 Intro
00:28 Linking to Different Sections
04:02 Revealing the Navbar on Scroll
09:20 Highlighting Links on Scroll
13:47 Conclusion

⭐️ Resources:
→ Remix this project: https://framer.link/MJITYzT
→ Framer: https://framer.link/adipurdila

🎓 My Design Classes
→ Watch all my Skillshare classes: https://www.skillshare.com/en/r/user/...

Use the link above to get 1 month free on Skillshare.

👋🏼 I'm Adi
I'm a passionate web designer and front-end developer with over 10 years of experience. For the past few years, I've been dedicated to sharing my knowledge through tutorials and courses.
Outside of work, I'm a big animal lover and enjoy spending time with my furry and feathery friends. 🐶🐈🐓🦆🐇
Let's learn and grow together!

💬 Let's get in touch
→ Adi Purdila Studio: https://www.adipurdila.studio
→ Hire me on Contra: https://contra.com/adipurdila/work?r=...
→ LinkedIn:   / adi-purdila  
→ Dribbble: https://dribbble.com/adipurdila
→ Instagram:   / adipurdila  
→ X:   / adipurdila  

--------------------------------------------------------------------------------

Some of the links I provided may be affiliate links for products and platforms I use on a regular basis. By using these links, you support my channel, for which I am incredibly grateful.

Your support helps sustain and grow the channel, and I sincerely appreciate your awesomeness!