# Hamburger Button

> AnimatedHamburgerButton Component Category: UI · Navigation · Animation Framework: React + Framer Motion + TailwindCSS  📋 Description: AnimatedHamburgerButton is a beautifully animated hamburger menu icon designed for modern React apps using Framer Motion and TailwindCSS. It transitions smoothly between open and closed states with elegant rotations and position shifts, mimicking a classic “X” close icon.  Perfect for toggling mobile nav menus or drawer components with delightful motion feedback.  🌟 Features: 🎬 Smooth morphing animation using Framer Motion variants  📐 Clean and minimal circular button UI  🎨 Built with TailwindCSS for easy theming  🧠 Declarative and fully reusable in any React app  ⚙️ Custom transition timing with MotionConfig  🧩 Ideal Use Cases: Mobile navigation toggles  Sidebar / Drawer trigger buttons  Interactive UI/UX prototypes  Any app needing aesthetic animated controls  📦 Dependencies: react  framer-motion  tailwindcss (for styling)  💡 Customization Ideas: Adjust rotate, top, or left values in VARIANTS to tweak the animation style  Change dimensions or colors to match your branding  Replace spans with SVG paths for more complex icons  🚀 Usage: tsx Copy Edit import { AnimatedHamburgerButton } from "./AnimatedHamburgerButton";  <AnimatedHamburgerButton />

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/hamburger-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/hamburger-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt