API

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

Hook into methods

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

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

<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".