Mozilla Protocol
  • 19.1.0

Menu Item

  • 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.
<section class="mzp-c-menu-item  mzp-has-icon">
    <a class="mzp-c-menu-item-link" href="#">
        <img class="mzp-c-menu-item-icon" src="/protocol/img/icons/image.svg" alt="Useful alt text where appropriate">
        <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>