Viora LogoViora UI
Login

Hamburger Elastic

Bars flip in 3D and stretch middle bar vertically with elastic bounce

demo-hamburger-elastic.tsx
Loading source code...

Installation

pnpm dlx viora-ui add hamburger-elastic
npx viora-ui add hamburger-elastic
yarn viora-ui add hamburger-elastic
bunx --bun viora-ui add hamburger-elastic

Usage

import { HamburgerElastic } from "viora-ui";
import { HamburgerElastic } from "viora-ui";

export default function HamburgerElasticDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <HamburgerElastic />
    </div>
  );
}

API Reference

HamburgerElastic

PropTypeDefaultDescription
className?string""Additional CSS classes for custom styling.
onChange?(isOpen: boolean) => void-Callback fired on change event.

Built by Otis

Last updated: 9/13/2026