Menu - Protocol Design System

An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule.

Navigation Demo

<nav class="mzp-c-menu mzp-is-basic">
  <ul class="mzp-c-menu-category-list">
    <li class="mzp-c-menu-category">
      <a class="mzp-c-menu-title" href="https://www.mozilla.org/">Sample Link</a>
    </li>
    <li
     class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
      <a class="mzp-c-menu-title" href="#" aria-haspopup="true" aria-controls="mzp-c-menu-panel-example">Firefox</a>
      <div class="mzp-c-menu-panel mzp-has-card"
       id="mzp-c-menu-panel-example">
        <div class="mzp-c-menu-panel-container">
          <button class="mzp-c-menu-button-close"
           type="button"
           aria-controls="mzp-c-menu-panel-example">Close
            Firefox menu</button>
          <div class="mzp-c-menu-panel-content">
            <ul>
              <li>

                <section class="mzp-c-menu-item  ">
                  <div class="mzp-c-menu-item-head">
                    <h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
                    <p class="mzp-c-menu-item-desc">
                      This is a short description with only
                      a single sentence and no more.
                    </p>
                  </div>
                  <ul class="mzp-c-menu-item-list">
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                  </ul>
                </section>

              </li>
              <li>

                <section class="mzp-c-menu-item  ">
                  <div class="mzp-c-menu-item-head">
                    <h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
                    <p class="mzp-c-menu-item-desc">
                      This is a short description with only
                      a single sentence and no more.
                    </p>
                  </div>
                  <ul class="mzp-c-menu-item-list">
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                    <li><a href="#">Secondary link</a></li>
                  </ul>
                </section>

              </li>
            </ul>
            <ul>
              <li>

                <section class="mzp-c-menu-item  ">
                  <div class="mzp-c-menu-item-head">
                    <h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
                    <p class="mzp-c-menu-item-desc">
                      This is a short description with only
                      a single sentence and no more.
                    </p>
                  </div>
                </section>
              </li>
              <li>

                <section class="mzp-c-menu-item  ">
                  <div class="mzp-c-menu-item-head">
                    <h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
                    <p class="mzp-c-menu-item-desc">
                      This is a short description with only
                      a single sentence and no more.
                    </p>
                  </div>
                </section>
              </li>
              <li>

                <section class="mzp-c-menu-item  ">
                  <div class="mzp-c-menu-item-head">
                    <h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
                    <p class="mzp-c-menu-item-desc">
                      This is a short description with only
                      a single sentence and no more.
                    </p>
                  </div>
                </section>
              </li>
            </ul>
          </div>
          <div class="mzp-c-menu-panel-card">

            <section
             class="mzp-c-card mzp-c-card-extra-small has-aspect-3-2">
              <a class="mzp-c-card-block-link" href="#">
    <div class="mzp-c-card-media-wrapper">
      <img class="mzp-c-card-image" src="../../../static/img/card/card-image.png" alt="">
    </div>
    <div class="mzp-c-card-content">
    <div class="mzp-c-card-tag">Card tag</div>
    <h2 class="mzp-c-card-title">Headline that goes onto a second or third line</h2>
    <p class="mzp-c-card-meta">6 hours ago</p>
    </div>
  </a>
            </section>

          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

<script
 src="../../../assets/protocol/protocol/js/protocol-menu.js">
</script>

<script>
  Mzp.Menu.init({
    onMenuOpen: function() {
      console.log('Menu opened');
    },
    onMenuClose: function() {
      console.log('Menu closed');
    },
    onMenuButtonClose: function() {
      console.log('Menu close button clicked');
    }
  });
</script>

Notes

On wide viewports a menu's content is displayed when hovering or focusing on a menu link.
On small viewports a menu's content is expanded/collapsed when clicking on a menu link.
Menu content should consist of two lists of one or more Menu Items.
An Extra Small Card can also be included inside a menu using the mzp-has-card class. Cards are only visible on wide viewports.
A menu can also feature regular links that do not expand on hover/click by omitting the mzp-has-drop-down and mzp-js-expandable classes.
A menu with a state class of mzp-is-basic is accessible without JavaScript. This state class gets replaced with mzp-is-enhanced when JS is executed.
A menu can be initialized using Mzp.Menu.init(options), where options is an Object with the following properties.
- onMenuOpen [Function] callback when a menu is opened (optional).
- onMenuClose [Function] callback when a menu is closed (optional).
- onMenuButtonClose [Function] callback when a menu close button is clicked (optional).

A menu item with link, title, description, icon and a list of secondary links.

<section class="mzp-c-menu-item  ">
  <div class="mzp-c-menu-item-head">
    <h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
    <p class="mzp-c-menu-item-desc">
      This is a short description with only a single
      sentence and no more.
    </p>
  </div>
  <ul class="mzp-c-menu-item-list">
    <li><a href="#">Secondary link</a></li>
    <li><a href="#">Secondary link</a></li>
    <li><a href="#">Secondary link</a></li>
    <li><a href="#">Secondary link</a></li>
    <li><a href="#">Secondary link</a></li>
    <li><a href="#">Secondary link</a></li>
  </ul>
</section>

Notes

Each Menu Item should have a link destination.
Adding a class of mzp-has-icon will allow for an icon to be displayed next to the title.
Icons sizes should be 24px x 24px.
Icons should be an inline <svg> or <img> with a class of mzp-c-menu-item-icon.
Icon, description and secondary links are all optional.