Scroll Menu

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.

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.