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>

Styling

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

API methods

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

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