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