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( "#menu", {
                extensions: ["theme-dark"]
            });
        }
    );
</script>

Example

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

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

        }
    );
</script>

Responsive extensions

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.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                extensions: {
                    "all": ["theme-dark"],
                    "(max-width: 400px)": ["fullscreen"]
                }
            });
        }
    );
</script>

CSS variables

Extensions might have their own set of CSS variables. To prevent overriding the variables for all menus, extensions re-declared the variables for the .mm-menu and/or .mm-slideout selectors:

<style>
    .mm-menu--fullscreen {
        --mm-size: 100%;

        &.mm-menu--opened ~ .mm-slideout {
            --mm-size: 100%;
        }
    }
</style>