Example Sidebar Menu full view

<div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left">

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