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. See the article demo page for an example in better context.
<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="../../../assets/protocol/protocol/js/protocol-sidemenu.js">
</script>