Hamburger Stagger

Top and bottom bars fold away in 3D, middle bar stretches to minus sign

Configuring your account...

Please wait while we prepare everything for you

Usage

import { HamburgerStagger } from "@/components/bynanaui/hamburger-stagger";

export function HamburgerStaggerDemo() {
  return <HamburgerStagger onChange={(isOpen) => console.log(isOpen)} />;
}

Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes
onChange(isOpen: boolean) => void-Callback when state changes

Features

  • Bars slide to diagonal positions
  • Forms a rotated grid pattern
  • Staggered rotation effect
  • Purple-pink gradient background