Extensions introduction

Because the mmenu.js plugin uses CSS for all sizing, positioning, styling and animations, the look and feel of a menu is easily extendable by enabling CSS extensions.

To enable an extension, add its name to the extensions option.

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

Example

Give it a go, change the options below and see how it affects the menu.

  • Dim out the page to black.
  • Open the menu from the right.
  • Apply the "dark" theme to the menu.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Responsive options

For responsive purposes, all extensions can be (de)activated when (un)matching a media query. To do so, move the extensions array to an object using the media query as a key. Use the "all" key for extension that should always be activated.

<script>
    $(document).ready(function() {
        $("#my-menu").mmenu({
            extensions: {
                "all": ["theme-dark"],
                "(max-width: 400px)": ["fullscreen"]
            }
        });
    });
</script>

CSS & SCSS variables

Extensions might have their own set of CSS and SCSS variables.

Available extensions

Border style Effects Fullscreen Listview Multiline Page dim Popup Positioning Shadows Themes Tileview