components/sidebar-menu/sidebar-menu.html

<nav class="mzp-c-sidemenu">
  <section class="mzp-c-sidemenu-summary mzp-js-toggle"
   aria-controls="sidebar-menu">
    <h3 class="mzp-c-sidemenu-label">Menu label</h3>
    <ul>
      <li>Menu title</li>
      <li class="mzp-is-current">Menu item one</li>
    </ul>
  </section>

  <section class="mzp-c-sidemenu-main" id="sidebar-menu">
    <h4 class="mzp-c-sidemenu-title"><a href="#">Menu title</a></h4>
    <ul>
      <li class="mzp-is-current">
        <a href="#">Menu item one</a></li>
      <li><a href="#">Menu item two</a></li>
      <li><a href="#">Menu item three</a></li>
    </ul>

    <h4 class="mzp-c-sidemenu-title"><a href="#">Second menu title</a></h4>
    <ul>
      <li>
        <a href="#">This menu item has a longer label that will wrap to a few lines, please don’t do this</a>
      </li>
      <li><a href="#">And one more menu item</a></li>
    </ul>
  </section>
</nav>

<script src="{{ '/protocol/js/sidemenu.js' | path }}"></script>
<script>window.MzpSideMenu.init();</script>