Menu

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

<nav class="mzp-c-menu">
  <ul class="mzp-c-menu-category-list">
    <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 mzp-has-icon ">
                  <a class="mzp-c-menu-item-link" href="#">
        <img src="../../../static/img/navigation/icons/accounts.svg" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
    <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>
  </a>
                  <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 mzp-has-icon ">
                  <a class="mzp-c-menu-item-link" href="#">
        <img src="../../../static/img/navigation/icons/accounts.svg" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
    <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>
  </a>
                  <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  ">
                  <a class="mzp-c-menu-item-link" href="#">
    <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>
  </a>
                </section>
              </li>
              <li>

                <section class="mzp-c-menu-item  ">
                  <a class="mzp-c-menu-item-link" href="#">
    <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>
  </a>
                </section>
              </li>
              <li>

                <section class="mzp-c-menu-item  ">
                  <a class="mzp-c-menu-item-link" href="#">
    <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>
  </a>
                </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>

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 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  ">
  <a class="mzp-c-menu-item-link" href="#">
    <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>
  </a>
  <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.