Add-ons introduction

Besides the extensions, the mmenu.js plugin also uses add-ons to add additional behavior. These add-ons require additional options and configuration to be set.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            searchfield: {
               // searchfield options
            }
         }, {
            searchfield: {
               // searchfield configuration
            }
         });
      }
   );
</script>

Example

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

  • Append a counter to the listitems.
  • Prepend a fixed header to the menu.
  • Prepend a fixed searchfield to the menu.
  • Append a fixed footer to the menu.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</script>

Options

Add-ons might have their own set of options grouped in an object in the options.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            // options
            searchfield: {
               // searchfield options
            }
         });
      }
   );
</script>

Configuration

Add-ons might have their own set of configuration options grouped in an object in the configuration.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            // options
         }, {
            // configuration
            searchfield: {

            }
         });
      }
   );
</script>

API methods

Add-ons might have their own set of API methods.

CSS & SCSS variables

Add-ons might have their own set of CSS and SCSS variables.

Available add-ons

Auto height Back button Columns Counters Dividers Drag Dropdown Fixed elements Iconbar Icon panels Keyboard navigation Lazy submenus Navbars Page scroll Searchfield Section indexer Set selected Sidebar Toggles