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.
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
Title
Link
Theme (Obsidian, Midnight, Arctic, Ember, Custom)
Tilt angle
Item spacing
Arrow visibility
Accent dot visibility
Background
Text
Dot color
Arrow color
Font family
Font size
Speed (Slow, Medium, Fast)
Auto rotate
Auto rotate interval
Blur amount
Blur spread
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
