Options introduction

The mmenu.js plugin provides a set of options for customizing your menu. The default values can be overridden by passing new values to the method.

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

Options are considered to be arbitrary and can be changed without breaking the plugin.

Note that add-ons might have their own set of options grouped in an object in the options.

Example

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

  • Use sliding submenus.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Available options

Option Datatype Default value Description
1 See the description.
2 Option can also be a function that returns a valid value. Inside this function this refers to a logic HTML element.
extensions Array [] A collection of extension names to enable for the menu.
You'll need this option when using the extensions.
hooks Object {} A collection of functions to hook into the API methods before the menu is initialised.
navbar
{
add Boolean true Whether or not to add a navbar above the panels.
title String 2 null 1 The title above the panels.
For the main panel it defaults to "Menu", for subpanels it defaults to the text in its parent menu item.
titleLink String "parent" The type of link to set for the title.
Possible values: "parent", "anchor" or "none".
}
onClick
{
close Boolean 2 false Whether or not the menu should close after clicking a link inside it.
preventDefault Boolean 2 null 1 Whether or not to prevent the default behavior for the clicked link.
The default value varies per link: true if its href is equal to or starts with a hash (#), false otherwise.
setSelected Boolean 2 true Whether or not the clicked link should appear as "selected".
}
slidingSubmenus Boolean true Whether or not submenus should come sliding in from the right. If false, submenus expand below their parent.
To expand a single submenu below its parent item, add the class "Vertical" to it.
wrappers Array [] A collection of framework wrappers to enable for the menu.

Note that add-ons might have their own set of options.