Mozilla Protocol
  • 22.0.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 heading.
  • 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-heading">A headline with 30 characters</h4>
    
    <p class="mzp-c-menu-item-body">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>