Navigation

Main site Navigation organism, with logo, Menu and Download Button molecules.

<div class="mzp-c-navigation">
  <div class="mzp-c-navigation-l-content">
    <div class="mzp-c-navigation-container">
      <button class="mzp-c-navigation-menu-button" type="button" aria-controls="map-c-navigation-items">Menu</button>
      <div class="mzp-c-navigation-logo"><a href="https://www.mozilla.org/">Mozilla</a></div>
      <div class="mzp-c-navigation-items" id="mzp-c-navigation-items">
        <div class="mzp-c-navigation-download">

          <div class="mzp-c-button-download-container">
            <a href="#" class="mzp-c-button mzp-t-download mzp-t-download mzp-t-secondary mzp-t-small">
    Download Firefox
  </a>
            <small class="mzp-c-button-download-privacy-link">
    <a href="https://www.mozilla.org/privacy/firefox/">Firefox Privacy Notice</a>
  </small>
          </div>

        </div>
        <div class="mzp-c-navigation-menu">

          <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>

        </div>
      </div>
    </div>
  </div>
</div>

Notes

  • On wide viewports, navigation content is displayed inline.
  • On small viewports, navigation content is hidden by default and toggled via a menu icon.
  • The Mozilla logo is always visible.
  • Navigation can be initialized using Mzp.Navigation.init(options), where options is an Object with the following properties.
    • onNavOpen [Function] A callback when the small screen navigation icon is clicked to open (optional).
    • onNavClose [Function] A callback when the small screen navigation icon is clicked to close (optional).