hamburger menu burger navigation toggle animation mobile navigation toggle button sidebar menu trigger animated menu icon standard hamburger icons feel generic need animated burger-to-X transition want distinctive springy menu toggle
Hamburger Stagger
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/hamburger-stagger.json Preview
Background
Customize
Quick Start
<button class="hamburger-stagger" aria-expanded="false"><span></span><span></span><span></span></button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1216 bytes · 55 lines
- Custom Properties
-
--burger-size--burger-color--burger-speed - Classes
-
.hamburger-stagger
hamburger menu burger navigation toggle animation
An asymmetric hamburger icon where the top and bottom bars are half-width, aligned to opposite sides. On toggle, the container rotates −45° while the half-bars counter-rotate to form an X. Uses a distinctive springy cubic-bezier(0.54, -0.81, 0.57, 0.57) easing.
Basic usage
<button class="hamburger-stagger" aria-expanded="false" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>Custom color and size
<button class="hamburger-stagger" style="--burger-size: 36px; --burger-color: #fff" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>