Morphing hamburger icon set
Three menu buttons: one turns into an X, one into a back arrow and one into an X with an elastic bounce.
Settings
Code
<div class="uv-nhb"><button type="button" class="x" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button><button type="button" class="ar" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button><button type="button" class="el" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
The menu icon is often the most pressed button on a mobile site, so its animation deserves care. This set offers three behaviors to pick from: a classic cross where the middle line vanishes, a back arrow where the whole icon turns around, and an elastic cross where the lines overshoot and the middle bar shoots away to the side.
Each is a real button with aria-expanded toggled on click, so screen readers know whether the menu is open. The line color switches to the second color when open, and reduced motion keeps the state change without the spring. Copy only the variant you need.