Animated Hamburger Menu is a free React menu button with eight hamburger icon animations, squeeze, pivot, arrow, stagger, duo, split, wipe and loop, that turn three bars into a close X or a back arrow using only CSS transitions, with aria-expanded state, a hover hint, size, thickness and duration props, and reduced motion support.
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Free Wensity component. Installs to @components/wensity/animated-hamburger-menu.tsx. For Pro components and updates, use pnpm dlx wensity@latest add animated-hamburger-menu.