mburger webcomponent

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.

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 my-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" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />
    </head>
    <body>
        <div id="my-page">
            <div id="my-header">
                <nav id="my-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="my-content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
        <script src="path/to/mmenu.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#my-menu" );
                }
            );
        </script>
    </body>
</html>

Note the ID "my-menu" on the <nav />, we'll be using it later on to target the menu for the webcomponent.

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>

The hamburger icon

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

<div id="my-header">
    <m-burger></m-burger>
    ...
</div>

If the menu attribute on a <m-burger /> targets a menu created with the mmenu.js plugin, the menu will automatically open when the hamburger icon is clicked and the hamburger icon will automatically animate when the menu opens and closes. Remember the ID "my-menu" on the <nav />? We're now using it to target the menu.

<m-burger menu="my-menu"></m-burger>

The default animation is pretty basic. For a more enjoyable animation, we can add the preferred animation name to the fx attribute. The available animations: collapse, spin, squeeze and tornado.

<m-burger menu="my-menu" fx="collapse"></m-burger>

If you want to add text to the hamburger icon, just add the text.

<m-burger menu="my-menu" fx="collapse">
    Menu
</m-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>
    m-burger {
        width: 80px;
        height: 80px;
        --mb-bar-height: 2px;
    }
</style>

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

Recap

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />
        <style>
            m-burger {
                width: 80px;
                height: 80px;
                --mb-bar-height: 2px;
            }
        </style>
        <script src="path/to/mburger.js" type="module"></script>
    </head>
    <body>
        <div id="my-page">
            <div id="my-header">
                <m-burger menu="my-menu" fx="collapse">
                    Menu
                </m-burger>
                <nav id="my-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="my-content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
        <script src="path/to/mmenu.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#my-menu" );
                }
            );
        </script>
    </body>
</html>

Learn more

If you'd like to learn more about customizing your hamburger icon, have a look at the documentation.
Documentation