Local navigation for a subset of pages or section of a website, intended to appear in a sidebar adjacent to the main content. It can accommodate multiple categories/sub-sections in a two-level hierarchy with titles corresponding to the top level page of each sub-section.

The menu summary reflects the current page, shown when the menu is collapsed in small viewports. The menu label should be the title of the site section.

Tips

  • Indicate the current page with the mzp-is-current class.
<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/protocol-sidemenu.js"></script>