Motion Hamburger

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

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, or send it over. I’d love to see what you create.

Need help?

Questions or feedback? Reach me anytime: [email protected] or on X @Matthias_Oel.

Need a matching component?

Explore more interactive components for your next project:

• Fullscreen Navbar ✨

• Motion Corner Menu ✨

• Explore all components 💪