Growing Navigation

Growing Navigation is a fully animated hamburger navigation built for Framer.

Growing Navigation is a fully animated hamburger navigation built for Framer. It expands horizontally on desktop and fills the full screen on mobile. You get a clean fullscreen menu with no extra code. Every interaction runs on Framer Motion. Links slide in with opacity and blur for a smooth layered reveal. Closing the menu plays the same animation in reverse. A dimmed overlay appears behind the panel and closes it on click. On mobile (767px and below), the menu switches to fullscreen, locks scroll, and restores it on close. Pressing Escape closes it as well. On the canvas, you see a static collapsed preview for easy placement. Growing Navigation uses Framer’s router to handle navigation. It resolves routes and anchors automatically. External links open in a new tab. Features Animated Hamburger Toggle Two bars morph into an X. Hover shows a preview of the shift. Blur-Fade Staggered Links Links enter with vertical slide, opacity, and blur. Each item is staggered by 80ms. Mobile Fullscreen Layout On small screens, the menu fills the viewport with proper padding and scroll lock. Framer Router Navigation Handles internal routes and anchor links. External URLs open in a new tab. Social Links Panel A secondary column for social links with hover arrow reveal and sibling dimming. Tagline Text Optional short text block above social links. Backdrop Overlay Dark overlay fades in and closes the menu on click. Backdrop Filter Support Control blur, saturation, and brightness for a frosted glass look. Escape Key Support Press Escape to close the menu. Canvas Preview Static collapsed view for accurate layout in Framer. Property Controls Navigation Nav Links Array of links with Label, URL, and New Tab toggle. Nav Font Font family and size for links. Nav Color Text color for navigation links. Link Spacing Vertical padding for each link. Social & Tagline Social Links Array of links with Label, URL, and New Tab toggle. Social Font Font family for social links. Social Color Text color for social links. Tagline Text Short text above social links. Tagline Font Font family for tagline. Tagline Color Text color for tagline. Branding Logo Image Responsive logo in the collapsed bar. Logo Link URL for logo click. Logo Width Width in pixels. Styling Toggle Color Color of hamburger bars. Divider Color Color of dividers and panel edges. Nav Background Background color of the panel. Bg Blur Blur level in pixels. Bg Saturation Saturation percentage. Bg Brightness Brightness multiplier. Layout Width (Open) Max width of panel on desktop. Hamburger Size Size of the toggle button. How to Use Add Growing Navigation to your page and place it as a header on top of all your layers. (Recommendation: Place it in your main template so you don't have to edit the navigation properties manually on every single page of your Framer project.) Open Nav Links and add labels and URLs. Set your Logo Image and link it to your homepage. Add Social Links and a short Tagline. Adjust colors, blur, and background to match your style. Set Width (Open) for desktop layout. Publish and test on mobile to check fullscreen behavior. Ideal Use Cases Portfolio and agency sites that need a bold navigation moment Studio and creative projects that want one system for desktop and mobile Framer sites that rely on router-based navigation Projects that include social links and a short brand message in the menu Growing Navigation handles both internal routing and external links without extra setup.

Animated hamburger nav that grows open