---
title: "Scroll Menu — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Aidan Looker · Navigation. What is Scroll Menu?"
canonical: "https://framer.elliotli.dev/component/scroll-menu"
---

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

# Scroll Menu

Bold scroll navigation with blur focus.

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

![Scroll Menu preview image 1](https://framer.elliotli.dev/og/component/scroll-menu/f2ef637fb92c8c0f/1600x1200.jpg)

## Summary

What is Scroll Menu?

## Description

## What is Scroll Menu?

Scroll Menu is a premium vertical text navigation component inspired by fashion journal website design. It displays large, bold menu items in a stacked layout with a distinctive tilt angle. The active item stays sharp and prominent while surrounding items progressively blur and dim, creating a dramatic depth-of-field effect. Ideal for hero sections, creative portfolios, editorial homepages, and agency landing pages where typography drives the visual experience.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Progressive blur-focus system that sharpens the active item while blurring surrounding items based on configurable distance and intensity
    
-   Spring-animated arrow indicator that smoothly tracks the active item as users scroll, click, or drag through the menu
    
-   Scroll, click, drag, and keyboard navigation with adjustable animation speed
    
-   Configurable tilt angle for the signature editorial angled layout
    
-   Coloured accent dot after each item title with a subtle scale pulse on selection
    
-   Edge gradient overlays that fade items smoothly into the background for polished depth
    
-   Responsive scaling that adapts font size and spacing to any container size
    
-   Four curated dark theme presets plus full custom colour control
    
-   Optional auto-rotate with configurable interval and automatic pause on interaction
    
-   Per-item link support for connecting menu entries to any page or URL
    

## Controls inside Framer

### Items

-   Title
    
-   Link
    

### Appearance

-   Theme (Obsidian, Midnight, Arctic, Ember, Custom)
    
-   Tilt angle
    
-   Item spacing
    
-   Arrow visibility
    
-   Accent dot visibility
    

### Colors (Custom theme)

-   Background
    
-   Text
    
-   Dot color
    
-   Arrow color
    

### Typography

-   Font family
    
-   Font size
    

### Animation

-   Speed (Slow, Medium, Fast)
    
-   Auto rotate
    
-   Auto rotate interval
    

### Blur

-   Blur amount
    
-   Blur spread
    

## Best use cases

-   Hero sections and above-the-fold navigation on editorial, fashion, or creative agency websites
    
-   Portfolio and case study showcases where each menu item represents a project or category
    
-   Full-screen landing page navigation with bold typographic impact
    
-   Section anchors on long-scroll sites with a premium, magazine-inspired aesthetic
    

Your menu items should be the first thing visitors notice. Scroll Menu makes that effortless.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #8733

## Details

- **Author**: Aidan Looker
- **Price**: $7.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-13
- **Added**: 2026-05-27
- **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