Scroll SideNav

Scroll SideNav brings elegant section navigation to your Framer projects.

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

1. Paste Scroll SideNav onto your page.

2. Set it to Fixed Position (left or right).

   

3. In the Sections list, add your labels and matching section IDs (e.g, “info”, “projects”, “services”, “about”, “testimonials”, “contact”).

   

4. Give each target frame on your page the corresponding Section ID.

   

5. 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.

   Scroll SideNav - Guide