---
title: "Growing Navigation — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Daniyal Habib · Navigation. Growing Navigation is a fully animated hamburger navigation built for Framer."
canonical: "https://framer.elliotli.dev/component/growing-navigation"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Growing Navigation

# Growing Navigation

Animated hamburger nav that grows

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

![Growing Navigation preview image 1](https://framer.elliotli.dev/og/component/growing-navigation/5e700cea4ce777f6/1600x1200.jpg)

## Summary

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

## Description

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.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bog97n29-adT6Ym4mWCfJNnbkHT2vjkqWQMkvsP)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bog97n29-zPQxhPfQYIDV6gxNSeZFVkxdnTDDJa)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bog97n29-Fr5tRYTJNxW74kpHESTxyMEj8gBWzP)

## How to Use

1.  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.)**
    
2.  Open Nav Links and add labels and URLs.
    
3.  Set your Logo Image and link it to your homepage.
    
4.  Add Social Links and a short Tagline.
    
5.  Adjust colors, blur, and background to match your style.
    
6.  Set Width (Open) for desktop layout.
    
7.  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.

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

-   All · #154

## Details

- **Author**: Daniyal Habib
- **Price**: $10.00
- **Published**: 2026-04-15
- **Updated**: 2026-11-01
- **Added**: 2026-04-08
- **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