DSV Header

Description: DSV Header is a premium navigation component for Framer. It has a floating pill shape, a spring-animated active indicator and subtle micro-interactions. One component adapts to desktop, tablet and phone, and everything is editable from the Properties Panel, with no code needed.

Key Features

• Light, Dark and System theme: it can follow the visitor’s OS setting. Every color can be overridden (background, text, accent, border, indicator, CTA).

• Spring active indicator: a pill glides between links on hover, on the current page, and automatically on the visible section of one-page sites.

• Mega menu: adjustable columns, width and footer link, with full keyboard support.

• Three mobile menu styles: Full Screen (circular reveal with staggered links), Dropdown and Expandable Panel. The hamburger icon morphs into a close icon.

• Scroll behavior: the header compresses as you scroll, with optional blur, shadow and opacity changes, plus optional hide on scroll down and show on scroll up.

• Separate headers per device: choose Auto, Desktop, Tablet or Phone, so each device can have its own header.

• Full control over motion: speed, spring strength and damping, hover scale, entrance animation and menu stagger. It respects the visitor’s “reduce motion” setting.

• Layout and typography: width, max width, height, top offset, padding, gap and radius. Pick any Framer font and set the size, weight and letter spacing.

• Logo and CTA: a text or image logo with an optional status dot, and a CTA button with an arrow animation.

• Navigation items: unlimited links to pages or sections, an optional new tab and 6 built-in icons in 3 styles.

• Accessible: keyboard navigation, visible focus states, Escape to close, and a focus trap in the full-screen menu.

• Lightweight: no external libraries and no external fonts.

Made with ❤️ by ThatGuyDesigns

✅ Updates

• 25/10/2026 First Release