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 />

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hamburger Button to your project and fits it to your theme.

import { Example } from "@/components/ui/hamburger-button";

export default function DemoOne() {
  return <Example />;
}