Mozilla Protocol
  • 19.1.0

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.

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.

Usage

Import using Webpack as an ES module:

import MzpSideMenu from '@mozilla-protocol/core/protocol/js/sidemenu';

Import using Webpack as CommonJS:

const MzpSideMenu = require('@mozilla-protocol/core/protocol/js/sidemenu');

Import as a global variable via a <script> tag:

const MzpSideMenu = window.MzpSideMenu;

You can then initialize the component using init().

MzpSideMenu.init();

Tips

  • Make sure to initialize the component after the DOM has loaded.
  • 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/sidemenu.js"></script>
<script>
    window.MzpSideMenu.init();
</script>