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

<!DOCTYPE html>
        <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" />
        <div id="page">
            <div id="header">
                <a href="#menu">Open the menu</a>
            <div id="content">
                <h1>This is a demo.</h1>
                <p>Click the menu icon to toggle the menu.</p>
        <nav id="menu">
                <li class="active"><a href="/">Home</a></li>
                <li><span>About us</span>
                        <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>
                <li><a href="/contact/">Contact</a></li>

        <script src="path/to/mmenu.js"></script>
                "DOMContentLoaded", () => {
                    const menu = new Mmenu( "#menu", {
                        slidingSubmenus: false,
                        extensions: ["theme-dark"]
                    }, {
                        classNames: {
                            selected: "active"
                        offCanvas: {
                            page: {
                                selector: "#page"

Learn more

Core Options Configuration API Styling Extensions Add-ons

More tutorials:

Contact list Thumbnail grid Customized colors Dynamic content