Example Sidebar Menu full view

<div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-start">
  
  <aside class="mzp-l-sidebar">
    <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-heading"><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-heading"><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"></script>
<script>window.MzpSideMenu.init();</script>

  </aside>
  <main class="mzp-l-main">
    <h1>Welcome to the main content</h1>

    <p>The sidebar comes <strong>before</strong> the main section in the source order.</p>

    <h2>Heading Level 2</h2>

    <p>Et pri porro ceteros tacimates, est at option dignissim intellegat.
      Tollit fuisset urbanitas nec no, feugiat sensibus an mea, nominavi
      <a href="#">interpretaris te eam</a>. No virtute imperdiet pro, ut pro
      sint viderer philosophia. Torquatos necessitatibus sit in, ad sit summo
      molestie adolescens, liber oratio veniam in per.</p>

    <p>No qui option timeam impetus, dolor salutatus pertinacia ea eam, at
      inani summo democritum vis. Est id quis admodum tractatos, ei ius
      eligendi platonem, maiorum eleifend et eam. Ei odio cetero voluptatibus
      ius, prima blandit epicurei te cum. Illud verterem principes vix te,
      te pro tale dicit. Debitis senserit no quo, vix et altera mollis
      scaevola. Sit no soleat aperiri vituperata. Qui <a href="#">id placerat
      euripidis</a>.</p>

    <h3>Heading Level 3</h3>

    <p>An quo epicurei placerat repudiare. Ut cetero molestiae mei, per id
      efficiantur consectetuer, in paulo repudiare vim. Inermis delectus
      adipiscing eos ad, sed ei graeci eleifend intellegam. Eu abhorreant
      neglegentur duo, eu mei nisl mundi.</p>

    <p>Suavitate comprehensam ea nam, tacimates vituperata vim te. Usu in
      laboramus maiestatis definitionem, noster complectitur at vim. Qui ut
      doctus sententiae percipitur, vivendum mediocritatem ea eum. Eu cum
      tantas nostrud, ea docendi blandit nec, vis id aeterno intellegat
      accommodare.</p>
  </main>

</div>