Hamburgers introduction

Check out this collection of animated hamburgers. All set up to work out of the box with the mmenu.js plugin. Click a hamburger to see the animation (and make sure the menu on the left is closed).



The mburger.css and mburger.js files are licensed under the Creative Commons Attribution 4.0 International license. You can use it in all your personal, non-commercial and commercial projects.


Install with NPM:
npm install mburger-css


Download directly from the Github repository.

How to use

There are two ways to get an animated hamburger on your webpage: With plain good ol' HTML and CSS, or with a new and fancy native webcomponent.

Check out these tutorials to learn how to use mburger.
mburger CSS tutorial mburger webcomponent tutorial

CSS & variables

By default, the hamburger icon adopts to its environment pretty good, the bars scale to fit and inherit their color for the parent element. The hamburger icon is pretty easy to customize too, just override some of the CSS values and variables.

Available CSS values and variables

Variables Datatype Default value Description
background-color CSS value transparent The background-color for the button.
border CSS value none Add a border around the button.
border-radius CSS value 0 Gives the button rounded corners, use 100% to turn the square into a circle.
color CSS value inherit The color for the bars.
height CSS value 60px The height for the button.
width CSS value 60px The width for the button.
--mb-button-size CSS value 60px Width and height for the button.
--mb-bar-width float 0.6 Width for the bars as a float (0 = 0%, 1 = 100%), relative to the button (the bars are horizontally centered).
--mb-bar-height CSS value 4px Height for the bars (the bars are vertically centered).
--mb-bar-spacing CSS value 10px Distance between bars (approximately).
--mb-animate-timeout CSS value 0.4s Timeout before starting the animation, ensures the animation starts after the menu is fully opened.