Documentation

Options

The mburger webcomponent provides a set of options for customizing your hamburger icon. The default values can be overridden by setting new values to the element attributes.

<mm-burger
    menu="menu"
    fx="spin"
></mm-burger>

Available options

Attribute	Datatype	Default value	Description
ease	string	"ease"	Transition timing function to use. Possible values: "elastic", "funky" and "shaky".
fx	string	null	Animation to use. Possible values: "collapse", "spin", "squeeze" and "tornado".
menu	string	null	ID of the menu to connect to.

Styling

By default, the hamburger icon adopts to its environment pretty good, the bars scale to fit and inherit their color from the parent element. The hamburger icon is pretty easy to customize too; like any other HTML element, it can be styled with CSS values and variables.

<style>
    mm-burger {
        color: #333;
    }
</style>

Available CSS values and variables

Variables	Datatype	Default value	Description
Values
background-color	color	transparent	Background-color for the icon.
border	border shorthand	unset	Border around the icon.
border-radius	pixels	0	Rounded corners for the icon.
color	color	inherit	Color for the bars and text.
margin	pixels	0	Margin for the icon.
padding	pixels	0	Padding for the icon.
Variables
--mb-bar-width	pixels	30px	Width for the bars.
--mb-bar-height	pixels	3px	Height for each bar.
--mb-bar-spacing	pixels	7px	Vertical distance between two bars.
--mb-animation-delay	time	0s	Timeout before starting the animation, can be used to delay the animation until the menu is fully opened or closed.
--mb-animation-duration	time	0.25s	Duration for the transitions, the duration of the complete animation is mostly longer due to various delays. The default duration differs for each "ease" option.
--mb-animation-function	easing-function	"ease"	Easing function for the transitions. Before creating your own easing-function, try using the "ease" option.

API

The mburger webcomponent provides a set of properties and methods for controlling the hamburger manually.

<script>
    const burger = document.querySelector("mm-burger");
    burger.state = "cross";
</script>

Available properties

Property	Datatype	Default value	Description
state	string	"bars"	What state the icon is in. Possible values: "bars" and "cross"

Available methods

Method( arguments )	Datatype	Default value	Description
connectMenu			Connect the hamburger to a menu (use the "menu" attribute to specify what menu should be connected). You don't need this method if your menu is created with the mmenu.js plugin or mmenu light plugin.
(
attribute	string	null	Attribute on the menu to observe for changes.
isOpen	function	null	Function to invoke when the specified attribute on the menu changes. When this function returns true, the menu is consdered to be "open".
open	function	null	Function that opens the menu, can be as simple as adding a classname to the menu.
close	function	null	Function that closes the menu, can be as simple as removing a classname from the menu.
)