Sidebar Menu

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>

Notes

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.