Dynamic content

Adding new content to a menu created with the mmenu.js plugin is really easy. All you need to do, is access the API and initiate the new content.

Create the menu

Lets start with setting up the HTML, fire the plugin and access the API.

<nav id="my-menu">
   <ul id="my-list">
      <li><a href="/">Home</a></li>
      <li id="my-item"><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         var menu = new Mmenu( "#my-menu" );
         var api = menu.API;
      }
   );
</script>

Note the ID on the <ul /> and <li />, we'll be using them later on.

Add new listitems

First, add a <li /> to the <ul />, note that the plugin rearrages some of the HTML and the ID of an <ul /> will be transfered to its parent <div />.

Second, call the initPanels method from the API. The initPanels method expects one argument: the panel it needs to (re)initiate.

<script>
   //   Find the panel and the listview.
   const panel = document.querySelector( "#my-list" );
   const listview = panel.querySelector( ".mm-listview" );

   //   Create the new listitem and anchor.
   const listitem = document.createElement( "li" );
   listitem.innerHTML = `<a href="/work">Our work</a>`;

   //   Add the listitem and anchor to the listview.
   listview.append( listitem );

   //   Update the listview.
   api.initPanels( panel );
</script>

Add new submenus

Adding a submenu is no different from adding a menu item: Add the <ul /> to a <li /> and call the initPanels method.

Again, the initPanels method expects one argument: the panel it needs to (re)initiate.

<script>
   //   Find the panel and listitem.
   const panel = document.querySelector( "#my-list" );
   const listitem = document.querySelector( "#my-item" );

   //   Create the new listview.
   const listview = document.createElement( "ul" );
   listview.innerHTML = `
      <li><a href="/about/history">History</a></li>
      <li><a href="/about/team">The team</a></li>
      <li><a href="/about/address">Our address</a></li>`;

   //   Add the listview to the listitem.
   listitem.append( listview );

   //   Update the listview.
   api.initPanels( panel );
</script>

Example

Recap

Add it all together and you should have a .html file which looks something like this.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>My webpage</title>
      <link href="path/to/my-styles.css" rel="stylesheet" />
      <link href="path/to/mmenu.css" rel="stylesheet" />
   </head>
   <body>
      <!-- The page -->
      <div id="my-page">
         <div id="my-header">
            <a href="#my-menu">Open the menu</a>
         </div>
         <div id="my-content">
            <p><strong>This is a demo.</strong><br />
               <a id="add_li" href="#">Add a new menu item</a><br />
               <a id="add_ul" href="#">Add a new submenu</a></p>
         </div>
         <div id="my-footer"></div>
      </div>

      <!-- The menu -->
      <nav id="my-menu">
         <ul id="my-list">
            <li><a href="/">Home</a></li>
            <li id="my-item"><a href="/about/">About us</a></li>
            <li><a href="/contact/">Contact</a></li>
         </ul>
      </nav>

      <script src="path/to/mmenu.js"></script>
      <script>
         Mmenu.configs.offCanvas.page.selector = "#my-page";

         document.addEventListener(
            "DOMContentLoaded", () => {
               var menu = new Mmenu( "#my-menu" );
               var api = menu.API;

               document.querySelector( "#add_li" )
                  .addEventListener(
                     "click", ( evnt ) => {
                        evnt.preventDefault();

                        //   Find the panel and listitem.
                        const panel = document.querySelector( "#my-list" );
                        const listitem = document.querySelector( "#my-item" );

                        //   Create the new listview.
                        const listview = document.createElement( "ul" );
                        listview.innerHTML = `
                           <li><a href="/about/history">History</a></li>
                           <li><a href="/about/team">The team</a></li>
                           <li><a href="/about/address">Our address</a></li>`;

                        //   Add the listview to the listitem.
                        listitem.append( listview );

                        //   Update the listview.
                        api.initPanels( panel );
                     }
                  );

               document.querySelector( "#add_ul" )
                  .addEventListener(
                     "click", ( evnt ) => {
                        evnt.preventDefault();

                        //   Find the panel and listitem.
                        const panel = document.querySelector( "#my-list" );
                        const listitem = document.querySelector( "#my-item" );

                        //   Create the new listview.
                        const listview = document.createElement( "ul" );
                        listview.innerHTML = `
                           <li><a href="/about/history">History</a></li>
                           <li><a href="/about/team">The team</a></li>
                           <li><a href="/about/address">Our address</a></li>`;

                        //   Add the listview to the listitem.
                        listitem.append( listview );

                        //   Update the listview.
                        api.initPanels( panel );
                     }
                  );
            }
         );
      </script>
   </body>
</html>