CSS Tool
Generate animated CSS hamburger menu icons with live preview — pick an animation style, adjust sizing and colour, then copy the ready-to-use CSS + HTML. Perfect for Canvas HTML Template mobile navbars.
Animation Style
CSS
.burger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 30px;
height: 21px;
cursor: pointer;
background: none;
border: none;
padding: 0;
}
.burger .line {
display: block;
width: 30px;
height: 3px;
background: #1A1D1F;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
}
.burger .line + .line {
margin-top: 6px;
}
.burger.is-open .line:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.burger.is-open .line:nth-child(2) {
opacity: 0;
}
.burger.is-open .line:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}HTML
<button class="burger" aria-label="Toggle menu" aria-expanded="false"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button>
The hamburger menu — three horizontal lines stacked vertically — is the universally recognised icon for mobile navigation. Tapping or clicking it reveals a hidden navigation drawer or overlay. The term “burger menu” comes from its resemblance to a bun-patty-bun sandwich, and it has been a UI staple since the early days of responsive design.
A pure CSS burger menu is built from three <span> elements inside a <button>. Each span acts as one horizontal line. When the user clicks, a CSS class (e.g. .is-open) is toggled, triggering CSS transform and transition rules to animate the lines into a close indicator — typically an X, an arrow, or a squeeze effect.
In the Canvas HTML Template, the navbar component already includes a toggler button. This generator helps you create a custom animated icon that replaces the default Bootstrap toggler icon, giving your site a polished, branded feel. Simply paste the generated CSS into your template’s <style> block and swap the HTML inside the toggler button.
No JavaScript animation libraries are needed — all five animation styles (Cross, Squeeze, Rotate, Arrow Left, Arrow Right) use transform: rotate(), translateY(), and opacity. The only JS needed is a one-line class toggle on click.
Choose an animation style — Cross (X) is the most common, Squeeze adds a spring feel, Rotate spins the whole icon, and Arrow Left/Right morph into directional chevrons.
Adjust Line Width and Line Height to match your design scale. Wider lines suit large touch targets; thinner lines feel more elegant.
Set the Line Gap to control vertical spacing between the three bars. Larger gaps make the icon more open and airy.
Fine-tune Border Radius to soften the line edges. Even 2px of rounding gives a friendlier look.
Pick a Line Color using the hex colour picker or type a hex value directly. Match it to your navbar text colour.
Click the preview icon (or the 'Click to preview' button) to see the open-state animation in real time.
Click 'Copy All' to grab the CSS, HTML and JS together — paste them into your project and you're done.
| Style | How It Works | Best For |
|---|---|---|
| Cross (X) | Top & bottom lines rotate ±45° to centre; middle fades out | General purpose — most intuitive close affordance |
| Squeeze | Lines compress then spring into an X shape | Playful / app-like interfaces |
| Rotate | Entire icon rotates 90° while lines form an X | Bold, dynamic hero navbars |
| Arrow Left | Top & bottom lines shorten and angle into a left chevron | Side drawers that slide in from the left |
| Arrow Right | Same as Arrow Left but points right | Side drawers that slide in from the right |
A CSS burger menu (also called a hamburger menu) is a navigation icon consisting of three horizontal lines stacked vertically, resembling a hamburger. It is the universal symbol for a hidden or collapsible navigation menu, predominantly used on mobile viewports. Clicking or tapping the icon reveals the full navigation. The three lines can be animated with pure CSS transitions to morph into a close indicator such as an X, an arrow, or other shapes.
You can animate a hamburger menu using CSS transforms and transitions alone — no JavaScript animation library required. Each line is a <span> element. When an 'is-open' class is toggled on the parent, CSS rules translate and rotate the top and bottom lines to form an X while the middle line fades out or scales to zero. The key properties are transform: translateY() rotate(), opacity, and transition with appropriate durations and easing. JavaScript is only needed to toggle the class on click.
For accessibility, always use a <button> element (not a <div>) so it is keyboard-focusable and announced as interactive by screen readers. Add aria-label='Toggle menu' to describe the purpose, and toggle aria-expanded='true'/'false' with JavaScript when the menu opens and closes. Ensure the button has a visible focus ring. The navigation list it controls should use aria-labelledby or be inside a <nav> landmark. These steps meet WCAG 2.1 Level AA requirements.
The Cross (X) animation is the most widely recognised and user-friendly option. When the three lines morph into an X, it universally signals 'close', giving users a clear affordance. The transition is simple — the top and bottom lines rotate ±45 degrees toward the centre while the middle line disappears. For a more refined feel, the Squeeze variant adds spring-like easing. Arrow animations can be useful when the menu slides in from the side, indicating direction.
Bootstrap 5 uses its own navbar-toggler button with data-bs-toggle='collapse' and data-bs-target to control the collapsible nav. To use a custom CSS burger animation instead of Bootstrap's default icon, replace the inner <span class='navbar-toggler-icon'> with three <span class='line'></span> elements and apply your custom burger CSS. Keep the data attributes so Bootstrap's JavaScript still handles the collapse. Add a listener for the 'shown.bs.collapse' and 'hidden.bs.collapse' events to toggle the 'is-open' class on your custom icon for the animation.
Canvas Builder generates production-ready Canvas HTML Template pages in seconds — with your burger menus, shadows, colours and copy baked in.
Try Canvas Builder