Hamburger Fullscreen Menu
A hamburger button that morphs into an X while a full-screen overlay menu wipes in from the top and its links stagger up.
About This Component
A hamburger button that morphs into an X while a full-screen overlay menu wipes down from the top and its links stagger up behind it. Escape or the X closes it, focus is trapped inside the panel while it is open and handed back to the button on close.
Read the full effect overview
Ships in three looks, vault, brutal and paper, switched by one data-variant attribute and defined entirely in CSS custom properties, so the same script serves all three. GSAP core only: no plugins, no framework, one HTML file, one stylesheet, one script.
What's Included
- Button morphs to an X: two bars rotate to a cross, the middle one scales out
- Overlay wipes in on an animated clip-path inset, not opacity
- Menu links stagger up from below with the panel's own timeline
- Escape, the X, and a link click all close it
- Focus is trapped in the panel while open and returned to the button on close
- Menu links live in the DOM at all times, so they survive with JavaScript off
- Reduced motion collapses every duration to an instant state change
- Three shipped variants: vault, brutal, paper
Perfect For
- Studio and agency headers where the nav is the whole first impression
- Mobile navigation on marketing sites
- Portfolio and editorial sites with four to six top-level destinations
- Any header that needs a real focus-trapped menu rather than a CSS dropdown
How It Works
The wipe
The overlay starts at clipPath inset(0% 0% 100% 0%), set by GSAP rather than CSS so nothing fights the tween, and opens to inset(0% 0% 0% 0%) on power3.out. Because the panel is clipped rather than faded, the links behind it are already laid out and simply get revealed.
The morph
The three bars are absolutely positioned with margin offsets, never a CSS transform, so GSAP owns rotation, y and scaleX outright. Opening tweens the outer pair to plus and minus 45 degrees and scales the middle bar to zero; the open colour is read from the --burger-ink-open custom property at the call site, so a variant change needs no JavaScript.
Focus and keyboard
Opening moves focus to the first link and a keydown handler cycles Tab and Shift+Tab through the panel's focusable elements plus the button itself, which is the X. Escape closes, and closing returns focus to the button with aria-expanded flipped back to false.