---
title: "Motion Hamburger — Free Framer component · Best of Framer"
description: "Free Framer component · by Matt · Navigation. About Motion Hamburger is a responsive animated menu icon that smoothly morphs three lines into a close X."
canonical: "https://framer.elliotli.dev/component/motion-hamburger"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Motion Hamburger

# Motion Hamburger

Every menu deserves better motion

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

![Motion Hamburger preview image 1](https://framer.elliotli.dev/og/component/motion-hamburger/c9dbea47d9c030c5/1600x1200.jpg)

## Summary

About Motion Hamburger is a responsive animated menu icon that smoothly morphs three lines into a close X.

## Description

## About

Motion Hamburger is a responsive animated menu icon that smoothly morphs three lines into a close X. Use the built-in toggle event to control mobile menus, fullscreen overlays, sidebars, and navigation drawers. It includes an optional ring, hover growth, keyboard support & accessible labels.

## What you can customize

Choose the initial open or closed state and customize the size, line thickness, icon color, animated ring, ring color, ring thickness, and hover growth. The scalable Framer Code Component works from 24px to 500px and respects reduced-motion preferences.

## Great for (examples)

Just a few ideas, use it anywhere you need an animated hamburger, menu toggle, or responsive navigation trigger:

-   Hamburger menus and animated menu icons
    
-   Mobile navigation and responsive headers
    
-   Fullscreen menus and navigation overlays
    
-   Sidebar, drawer, and off-canvas navigation
    
-   Portfolio and creative studio websites
    
-   Agency, architecture, and editorial websites
    
-   SaaS and product landing pages
    
-   Minimal, light, dark, and monochrome interfaces
    
-   Interactive prototypes and UI design systems
    
-   Morphing icons and SVG microinteractions
    
-   Desktop, tablet, and mobile layouts
    
-   Premium Framer templates
    

## Share your build

If you ship something cool with it, post it on X and tag me [@Matthias\_Oel](https://x.com/Matthias_Oel), or send it over. I’d love to see what you create.

## Need help?

Questions or feedback? Reach me anytime: [matthias@lmvision.de](mailto:matthias@lmvision.de) or on X [@Matthias\_Oel.](https://x.com/Matthias_Oel)

## Need a matching component?

Explore more interactive components for your next project:

-   [Fullscreen Navbar ✨](https://framer.link/PksynXK)
    
-   [Motion Corner Menu ✨](https://framer.link/ikkDlm1)
    
-   [Explore all components](https://framer.link/fsd2pgh) 💪
    

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

-   All · #1041

## Details

- **Author**: Matt
- **Published**: 2026-09-02
- **Updated**: 2026-10-30
- **Added**: 2026-09-02
- **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