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( "#my-menu" );

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

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

Available API methods

Method( arguments ) Datatype Default value Description
closeAllPanels Invoke this method to close all opened panels and go back to the first panel.
closePanel Invoke this method to close a panel (only available if the "slidingSubmenus" option is set to false).
(
panel HTMLElement The panel to close.
)
initPanels Invoke this method to initialize newly added panels.
(
panels HTMLElement[] The panels to (re)initialize.
)
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( "#my-menu", {
            hooks: {
               "openPanel:start": ( panel ) => {
                  console.log( "Started opening pane: " + panel.id );
               },
               "openPanel:finish": ( panel ) => {
                  console.log( "Finished opening panel: " + panel.id );
               }
            }
         });
      }
   );
</script>
Using the API bind method
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         var menu = new Mmenu( "#my-menu" );
         var api = menu2.API;

         api.bind( "openPanel:start", 
            ( panel ) => {
               console.log( "Started opening panel: " + panel.id );
            }
         );
         api.bind( "openPanel:finish", 
            ( panel ) => {
               console.log( "Finished opening panel: " + panel.id );
            }
         );
      }
   );
</script>

Available API hooks

closeAllPanels:before
Invoked before anything when closing all panels.
closeAllPanels:after
Invoked after everything when closing all panels.
closePanel:before
Invoked before anything when trying to close a panel.
closePanel
Invoked after a panel finishes closing.
closePanel:after
Invoked after everything when trying to close a panel.
openPanel:before
Invoked before anything when trying to open a panel.
openPanel:start
Invoked before a panel starts opening.
openPanel:finish
Invoked after a panel finishes opening.
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 the :before and :after hooks will always be invoked, regardless of any conditions done in the method.
Note that add-ons might have their own set of API hooks.