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" />
    </head>
    <body>
        <div id="my-page">
            <div id="my-header">
                <a href="#my-menu">Open the menu</a>
                <nav id="my-menu">
                    <ul>
                        <li class="active"><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>The title</h1>
                <p>Some content</p>
            </div>
        </div>

        <script src="path/to/mmenu.js"></script>
        <script>
            Mmenu.configs.classNames.selected = "active";
            Mmenu.configs.offCanvas.page.selector = "#my-page";

            document.addEventListener(
                "DOMContentLoaded", () => {
                    const menu = new Mmenu( "#my-menu", {
                        slidingSubmenus: false,
                        extensions: ["theme-dark"]
                    });
                }
            );
        </script>
    </body>
</html>

Learn more

Core Options Configuration API CSS & SCSS Extensions Add-ons

More tutorials:

Contact list Thumbnail grid Customized colors Dynamic content