Examples introduction

Here are some of the more extensive examples, all build with default options, extensions and add-ons. If you're looking for more basic examples, check out the options, extensions and add-ons.


Check out what you can do with some small JavaScript, CSS and a little bit of creativity.


Here's a quick demo of how easy it is to create a cool and unique menu. If you'd like to learn more about customizing your menu, check out the options, extensions, add-ons and API pages.

Please note that not all options play well together, for example: You cant have the "panels zoom" effect without having "sliding submenus".

  • Options
  • Use sliding submenus.
  • Extensions
  • Open the menu from the right.
  • Apply the "dark" theme to the menu.
  • Add-ons
  • Prepend a fixed iconbar to the menu.
  • Show a small part of the parent panel.
  • Append a counter to the listitems.
  • Prepend a fixed navbar to the menu.
  • Prepend a fixed searchfield to the menu.
  • Append a fixed footer to the menu.
Congratulations, you're done!

Here's your HTML and JavaScript, the unimportant parts have been faded out:

<!DOCTYPE html>

        <title>mmenu.js playground</title>
        <meta charset="utf-8" />
        <link href="layout.css" rel="stylesheet" />

        <!-- Include mmenu files -->
        <link href="path/to/mmenu.css" rel="stylesheet" />
        <script src="path/to/mmenu.js"></script>

        <!-- Fire the plugin -->
                "DOMContentLoaded", () => {



        <!-- The page -->
        <div class="page">
            <div id="header">
                <a href="#menu"></a>
            <div class="content">
                <p><strong>This is a demo.</strong><br>
                    Click the menu icon to open the menu.</p>

        <!-- The menu -->
        <nav id="menu">
                <li><a href="/">Home</a></li>
                <li><a href="/work">Our work</a></li>
                <li><span>About us</span>
                        <li><a href="/about/history">History</a></li>
                        <li><span>The team</span>
                                <li><a href="/about/team/management">Management</a></li>
                                <li><a href="/about/team/sales">Sales</a></li>
                                <li><a href="/about/team/development">Development</a></li>
                        <li><a href="/services/design">Design</a></li>
                        <li><a href="/services/development">Development</a></li>
                        <li><a href="/services/marketing">Marketing</a></li>
                <li><a href="/contact">Contact</a></li>