Hamburger Morph

Bars explode out and collapse into a minus sign with smooth morphing

Usage

import { HamburgerMorph } from "@/components/bynanaui/hamburger-morph";

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

Props

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

Features

  • Morphs into arrow pointing right
  • Top and bottom bars angle inward
  • Middle bar extends as arrow shaft
  • Smooth back easing animation