---
title: "Scroll SideNav — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ecem Gececi · Navigation. Scroll SideNav brings elegant section navigation to your Framer projects."
canonical: "https://framer.elliotli.dev/component/scroll-sidenav"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Scroll SideNav

# Scroll SideNav

Side Navigation Component

[View on Framer](https://framer.com/marketplace/components/scroll-sidenav/?via=elliot-li)

![Scroll SideNav preview image 1](https://framer.elliotli.dev/og/component/scroll-sidenav/b4acae95d7292c9c/1600x1200.jpg)

## Summary

Scroll SideNav brings elegant section navigation to your Framer projects.

## Description

**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).
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-sublvusf-rVR49zEbYuTtTMJ0jIHOaoyuKOT78W)
3.  In the **Sections** list, add your labels and matching section IDs (e.g, “info”, “projects”, “services”, “about”, “testimonials”, “contact”).
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-88vu3xix-sp9qiAV0mB0mL93zDqoM8D6Kv2ylkY)
4.  Give each target frame on your page the corresponding **Section ID**.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-88vu3xix-RWXBIQ8Vv2m2c8Z7aNpqjb3chZHZLn)
5.  Adjust colors, font, and alignment to fit your style. (This is how I used it for the preview.)
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-88vu3xix-53igjiXMWSIqUUuexjAFkjyKfRx0UM)
    
    Preview your site, the nav will scroll smoothly and highlight active sections automatically.
    
    Scroll SideNav - Guide

## Rank history [How rankings work →](/terms#rankings)

-   All · #840

## Details

- **Author**: Ecem Gececi
- **Price**: $5.00
- **Published**: 2025-10-23
- **Updated**: 2026-08-14
- **Added**: 2025-10-10
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation