Guides · · Maxwell Prehoda
10 Hamburger Menu Animation Examples, From Apple's Two-Line Morph to Full Libraries
A hamburger animation does one job: show that the button opened something and is now the way to close it. The best ones morph the three (or two) lines into an X or an arrow in about a quarter of a second, in two steps: the lines come together, then they turn. Anything slower makes a menu feel heavy, and anything without a clear closed state leaves people hunting for the exit.
Below are the implementations worth copying, starting with the exact timing Apple uses on apple.com, then the libraries most people install (Jonathan Suh's Hamburgers, hamburger-react, useAnimations), Android's built-in morph, and the two references that decide whether your menu works at all: Inclusive Components on accessibility and Nielsen Norman Group's data on hidden navigation. Our own pure-CSS menus play live where they fit.
2. Hamburgers by Jonathan Suh: Best for picking from many CSS morphs with no JavaScript library
Platform: CSS and Sass, MIT
The library most people mean when they say "animated hamburger". Jonathan Suh's Hamburgers has around 7,000 GitHub stars and offers 17 named types, including 3DX, Arrow, Collapse, Elastic, Emphatic, Slider, Spin, Spring, Squeeze, Stand and Vortex, most with a reverse version for 31 classes in all.
You add the base markup plus a type class such as `hamburger--collapse`, then toggle `is-active` with a line of JavaScript. The Sass version lets you set padding, line width and color, and drop the types you don't use so you only ship one.
The demo page is the fastest way to feel the difference between a spin, a squeeze and a collapse before you commit.
Watch out for: The repository hasn't seen a push since 2023, so treat it as finished rather than maintained. Import only the type you use; the full CSS includes all 31 variants.
3. hamburger-react: Best for React apps that want a tiny, tunable burger
Platform: React, about 1.5 KB min and gzip
A React component with 14 variants: Tilt (the default), Squash, Cross, Twirl, Fade, Slant, Spiral, Divide, Turn, Pivot, Sling, Squeeze, Spin and Rotate. Using one adds about 1.5 KB to your bundle.
Its props are a short course in tuning menu motion. `duration` defaults to 0.4 seconds (set 0 to turn animation off), `easing` defaults to cubic-bezier(0, 0, 0, 1), a very strong ease-out, and `rounded`, `direction`, `size` and `distance` adjust the look. It also pads the icon to a tap target of at least 48 by 48 pixels and takes a `label` for screen readers.
Watch out for: 0.4 seconds is on the slow side for a control people tap often. Try 0.25 to 0.3 seconds, and wire `duration` to 0 when the user prefers reduced motion.
4. Android's DrawerArrowDrawable: Best for native Android apps with a navigation drawer
Platform: AndroidX AppCompat
Android ships the hamburger-to-arrow morph as a system drawable. The docs describe it as a drawable that can draw a "Drawer hamburger" menu or an arrow and animate between them, with the progress between the two states controlled by `setProgress`. `setSpinEnabled` decides whether the bars rotate during the transition.
Because progress is a number, you can tie it to the drawer's slide position, so the icon morphs exactly as far as the drawer is open. That direct link between gesture and icon is better than any fixed-duration animation, and it is worth copying on the web when a menu can be dragged.
Watch out for: An arrow means "back", not "close". Use the arrow morph when the menu is a level of navigation the user returns from, and an X when it is an overlay they dismiss.
How to choose a hamburger menu animation
Match the end shape to the meaning
Morph to an X when the menu is an overlay you close (most websites, like apple.com). Morph to an arrow when the menu is a level you go back from, as Android's DrawerArrowDrawable does. Morph a plus to an X for action menus like our Floating Action Button Menu. A spinning, elastic or 3D flip is decoration on top of that choice, not a replacement for it.
Match the timing to the tap
Menus are tapped often, so aim for about 200 to 300ms, like Apple's 0.24 seconds, with two steps (collapse, then rotate) and a strong ease-out at the end. Libraries default slower (hamburger-react uses 0.4 seconds), so tune them down. Under prefers-reduced-motion, swap icons instantly.
Match it to your stack, then fix the semantics
No framework: copy a CSS morph from our Hover Effects directory or Jonathan Suh's library. React: hamburger-react. Lottie already on the page: useAnimations. Native Android: DrawerArrowDrawable. Whatever you pick, follow Inclusive Components: a real button, aria-expanded, a label, and the list right after it in the nav.
Ship a better menu toggle today
Open your site on a phone and tap the menu ten times. If you notice the animation by the third tap, it is too slow. If you can't tell whether the menu is open from the icon alone, the end state isn't clear. Fix those two things and most hamburgers are done.
If you want a morph that matches your brand's icon style, describe it in the creator (or paste your header's HTML) and get production-ready CSS with a reduced-motion version built in.
Animate my hamburger menu button (HTML below) with CSS only. Three 2px bars, 24px wide. When the button has aria-expanded="true": first 120ms, the top and bottom bars move to the middle and the middle bar fades (ease-in), next 120ms, the two bars rotate to 45 and -45 degrees into an X (ease-out). Reverse the same steps on close. With prefers-reduced-motion, switch between the two icons instantly. Keep a 44px tap target and do not change the button's size.
Common questions
How do you animate a hamburger menu into an X with CSS?
Make three bars (spans or pseudo-elements). On the open state, translate the top and bottom bars to the center and fade the middle one, then rotate the two remaining bars to 45 and -45 degrees. Run the translate first and the rotate second using transition delays, and reverse the order on close. Our Hamburger Menu to X shows the sequence.
How long should a hamburger menu animation take?
Around 200 to 300ms. Apple's menu icon on apple.com morphs in 0.24 seconds. Menus are opened often, so anything much longer starts to feel sluggish.
Are hamburger menus bad for UX?
On desktop they often are: Nielsen Norman Group found hidden navigation was used far less than visible navigation and slowed tasks. On mobile they are a reasonable tradeoff when you have more than about four top-level links. Show links directly when you have room.
Should a hamburger menu use role="menu"?
Not for site navigation. Heydon Pickering's Inclusive Components recommends a disclosure: a button with aria-expanded that shows and hides a list of links. ARIA menus are meant for application-style commands.
What is the best hamburger menu animation library?
For plain CSS, Jonathan Suh's Hamburgers (17 types, MIT). For React, hamburger-react (14 variants, about 1.5 KB). For Lottie icon sets, useAnimations. For one icon, a few lines of your own CSS are usually lighter than any library.