Scroll SideNav
Smooth scroll navigation for portfolios & long pages. Hover to reveal section names and jump smoothly between sections.
Make it with Workshop
Build your own component with AI
Smooth scroll navigation for portfolios & long pages. Hover to reveal section names and jump smoothly between sections.
Make it with Workshop
Build your own component with AI
Scroll SideNav brings elegant section navigation to your Framer projects. Built for portfolios, case studies, and one-pagers that deserve seamless scrolling and a touch of motion.
Features
Smooth scrolling between sections
Hover-reveal labels for a minimal, elegant feel
Auto section highlighting (ScrollSpy)
Fully customizable colors, fonts, and alignment
Lightweight, responsive, and built with Framer Motion
How to Use
Paste Scroll SideNav onto your page.
Set it to Fixed Position (left or right).
In the Sections list, add your labels and matching section IDs (e.g, “info”, “projects”, “services”, “about”, “testimonials”, “contact”).
Give each target frame on your page the corresponding Section ID.
Adjust colors, font, and alignment to fit your style. (This is how I used it for the preview.)
Preview your site, the nav will scroll smoothly and highlight active sections automatically.
