API introduction

After the class instance is created, an API is available for the menu. With this API, you can invoke the plugin methods or bind new function to them. The API is stored in the "API" property of the class instance.

Note that add-ons might have their own set of API methods and hooks.

Invoke methods

Invoke the API methods to control the plugin manually.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            // Fire the plugin
            const menu = new Mmenu( "#menu" );

            // Get the API
            const api = menu.API;

            // Invoke a method
            const panel = document.querySelector( "#panel" );
            api.openPanel( panel );
        }
    );
</script>

Available API methods

Method( arguments ) Datatype Default value Description
closePanel Invoke this method to close a panel (only available if the "slidingSubmenus" option is set to false).
(
panel HTMLElement The panel to close.
)
openPanel Invoke this method to open a panel.
(
panel HTMLElement The panel to open.
)
setSelected Invoke this method to make a menu item appear "selected".
(
listitem HTMLElement The listitem to appear "selected".
)

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

Hook into methods

Hook a new function into the API methods with the hooks option or the API bind method.

Using the hooks option
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                hooks: {
                    "openPanel:before": ( panel ) => {
                        console.log( "Started opening pane: " + panel.id );
                    }
                }
            });
        }
    );
</script>
Using the API bind method
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const menu = new Mmenu( "#menu" );
            const api = menu.API;
            api.bind( "openPanel:before",
                ( panel ) => {
                    console.log( "Started opening panel: " + panel.id );
                }
            );
        }
    );
</script>

Available API hooks

closePanel:before
Invoked before anything when trying to close a panel.
closePanel:after
Invoked after everything when trying to close a panel.
openPanel:before
Invoked before anything when trying to open a panel.
openPanel:after
Invoked after everything when trying to open a panel.
setSelected:before
Invoked before making a menu item appear "selected".
setSelected:after
Invoked after making a menu item appear "selected".

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