Wensity

Animated Hamburger Menu

Eight animated hamburger menu icons that morph into a close X or back arrow in CSS.

hamburger menumenu iconmobile menumenu togglenavigationcss animation
Animated Hamburger Menu component preview

Overview

Animated Hamburger Menu is a React and Tailwind CSS menu button whose bars morph into a close X or a back arrow, in Next.js or any React app. It ships eight variants: squeeze, pivot, arrow, stagger, duo, split, wipe and loop. Every move is a CSS transition on transforms, widths or SVG stroke dashes, so no animation library loads and nothing runs per frame. Hovering a closed icon hints at the coming change. The button sets aria-expanded and defaults its label to Menu. Reduced motion swaps state instantly. Pass open and onOpenChange so tapping a menu link closes it.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add animated-hamburger-menu

Usage

Import AnimatedHamburgerMenu from @/components/wensity/animated-hamburger-menu and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { useState } from "react";
import { HamburgerMenu } from "@/components/wensity/animated-hamburger-menu";


export default function Example() {
  const [open, setOpen] = useState(false);


  return (
    <HamburgerMenu
      variant="squeeze"
      open={open}
      onOpenChange={setOpen}
      aria-controls="site-menu"
    />
  );
}

Props

PropTypeDefaultDescription
variant"squeeze" | "pivot" | "arrow" | "stagger" | "duo" | "split" | "wipe" | "loop""squeeze"How the bars move into the open state.
openboolean-Controlled open state. Pair it with onOpenChange.
defaultOpenbooleanfalseInitial open state when uncontrolled.
onOpenChange(open: boolean) => void-Called with the next state on every toggle.
sizenumber24Icon size in pixels. The button adds 16 pixels of hit area.
thicknessnumber2Bar thickness, measured in a 24 unit icon box so it scales with size.
durationnumber420Length of one open or close in milliseconds.
roundedbooleantrueRounded bar ends. Turn off for square ends.

Related components

  • macOS Floating Dock component preview

    macOS Floating Dock

    A magnetic dock where icons inflate near the cursor and push their siblings aside.

  • Multi-Select Tag Input component preview

    Multi-Select Tag Input

    A tag input where pills pop in as you add them and slide out on remove, closing the gap without snapping the layout.

  • Shimmering Skeleton Wrapper component preview

    Shimmering Skeleton Wrapper

    One angled GPU sweep that travels across any placeholder geometry you wrap, never a separate shimmer stuttering per row.

  • Cool Button component preview

    Cool Button

    A dual-layer orbit glow that soft-spins around the edge of any button or link you wrap it around, at zero layout cost.

Featured in React navbar components.