Documentation

Getting started

This documentation page assumes you have some knowledge of HTML, CSS and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back!

If you're new to using the mburger webcomponent, please grab a copy of the script and try the tutorial.

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.
)