Open the menu Skip to main content

Tutorial

Introduction

In this tutorial, we'll create an animated hamburger icon using the mburger webcomponent. Just follow the tutorial step by step and you'll have it up and running in no time.

This tutorial assumes you have some basic knowledge of the mmenu.js plugin. If you need more information about the mmenu.js plugin, have a look at the off-canvas tutorial first.

You can also use the mmenu light plugin for the menu, the mburger webcomponent works with both.

Lets start with creating a .html file and add some basic markup for a header and the content. For this tutorial we'll assume you already have a stylesheet (called styles.css) for styling this markup. We'll also add markup for a menu and use the mmenu.js plugin to make it an off-canvas menu. Most commonly, you'd write the JavaScript in a separate .js file, but for this tutorial we'll write it in an inline <script>.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
        <title>My webpage</title>
        <link href="path/to/styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />
    </head>
    <body>
        <div id="page">
            <div id="header">
                <nav id="menu">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><span>About us</span>
                            <ul>
                                <li><a href="/about/history/">History</a></li>
                                <li"><a href="/about/team/">The team</a></li>
                                <li><a href="/about/address/">Our address</a></li>
                            </ul>
                        </li>
                        <li><a href="/contact/">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div id="content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
        <script src="path/to/mmenu.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#menu" );
                }
            );
        </script>
    </body>
</html>

Note the ID "menu" on the <nav>, we'll be using it later on to target the menu for the hamburger icon.

Next, include the mburger webcomponent .js file. Most commonly, webcomponent .js files are located in the <head>.

<!DOCTYPE html>
<html>
    <head>
        ...
        <script src="path/to/mburger.js" type="module"></script>
    </head>
    ...
</html>

Note that the webcomponent is a module and module script tags need type="module".

The hamburger icon

Now that we've set up our .html file, lets add the hamburger icon. For this tutorial, we'll add it in the header.

<div id="header">
    <mm-burger></mm-burger>
    ...
</div>

Remember the ID "menu" on the <nav>? We will now using it to target the menu.

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

If the menu attribute matches the ID on a menu created with the mmenu.js plugin or mmenu light plugin, the hamburger is automatically connected to the menu. Meaning, you don't need to add any eventlisteners to open the menu or change the hamburger state. If you're using another script for your menu, check the documentation for the connectMenu method.

If you want, you can add text to the hamburger.

<mm-burger
    menu="menu"
>
    Menu
</mm-burger>

The default animation is pretty basic. For a more enjoyable animation, we can add the preferred effect and easing function to the fx and ease attributes.

Available effects: collapse, spin, squeeze and tornado.
Available easing functions: elastic, funky and shaky.

<mm-burger
    menu="menu"
    fx="collapse"
    ease="elastic"
>
    Menu
</mm-burger>

Accessibility considerations

Make the hamburger icon keyboard accessible by adding the tabindex attribute. Add a role and title attribute for screen readers.

<mm-burger
    menu="menu"
    fx="collapse"
    ease="elastic"
    role="button"
    tabindex="0"
    title="Open the menu"
>
    Menu
</mm-burger>

Customize the icon

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. Most commonly, you'd write these styles in a separate .css file, but for this tutorial we'll write them in an inline <style>.

<style>
    mm-burger {
        --mb-bar-height: 2px;

        padding: 5px;
        border: 1px solid;
        border-radius: 5px;
    }
</style>

For a complete overview of all CSS values and variables, check out the the documentation.

Result

You now have a .html file which looks something like this.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
        <title>My webpage</title>
        <script src="path/to/mburger.js" type="module"></script>
        <link href="path/to/styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />
        <style>
            mm-burger {
                --mb-bar-height: 2px;
        
                padding: 5px;
                border: 1px solid;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <div id="header">
                <mm-burger
                    menu="menu"
                    fx="collapse"
                    ease="elastic"
                    role="button"
                    tabindex="0"
                    title="Open the menu"
                >
                    Menu
                </mm-burger>
                <nav id="menu">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><span>About us</span>
                            <ul>
                                <li><a href="/about/history/">History</a></li>
                                <li"><a href="/about/team/">The team</a></li>
                                <li><a href="/about/address/">Our address</a></li>
                            </ul>
                        </li>
                        <li><a href="/contact/">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div id="content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
        <script src="path/to/mmenu.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#menu" );
                }
            );
        </script>
    </body>
</html>