Mozilla Protocol
  • 19.1.0

Menu List: Default

A drop down menu with a list of links a user can choose from.

  • Usually would be placed in a main section of a page, but can also be used inside a header, footer, or elsewhere.
  • Typical usage would be to place different types of products to download.
  • Has a variation that showcases a download icon on hover, which can be utilized using the mzp-t-download class.
  • Inline JavaScript in this example is for demo purposes only. Use external files in production code.
<div class="mzp-c-menu-list  is-summary">
    <h3 class="mzp-c-menu-list-title">Meet the Family</h3>
    <ul class="mzp-c-menu-list-list">
        <li class="mzp-c-menu-list-item"><a href="#">Relay</a></li>
        <li class="mzp-c-menu-list-item"><a href="#">Monitor</a></li>
        <li class="mzp-c-menu-list-item"><a href="#">MDN</a></li>
        <li class="mzp-c-menu-list-item"><a href="#">Slightly longer menu item for testing</a></li>
    </ul>
</div>

<script src="../../protocol/js/details.js"></script>

<script>
    window.MzpDetails.init('.mzp-c-menu-list-title');
</script>