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="patterns.organisms.navigation.navigation">Menu</button>

      <div class="mzp-c-navigation-items"
       id="patterns.organisms.navigation.navigation">
        <div class="mzp-c-navigation-menu">

          <nav class="mzp-c-menu mzp-is-basic">
            <ul class="mzp-c-menu-category-list">
              <li class="mzp-c-menu-category">
                <a class="mzp-c-menu-title" href="https://www.mozilla.org/">Sample Link</a>
              </li>
              <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  ">
                            <div
                             class="mzp-c-menu-item-head">
                              <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>
                            </div>
                            <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  ">
                            <div
                             class="mzp-c-menu-item-head">
                              <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>
                            </div>
                            <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  ">
                            <div
                             class="mzp-c-menu-item-head">
                              <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>
                            </div>
                          </section>
                        </li>
                        <li>

                          <section
                           class="mzp-c-menu-item  ">
                            <div
                             class="mzp-c-menu-item-head">
                              <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>
                            </div>
                          </section>
                        </li>
                        <li>

                          <section
                           class="mzp-c-menu-item  ">
                            <div
                             class="mzp-c-menu-item-head">
                              <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>
                            </div>
                          </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>

          <script
           src="../../../assets/protocol/protocol/js/protocol-menu.js">
          </script>

          <script>
            Mzp.Menu.init({
              onMenuOpen: function() {
                console.log('Menu opened');
              },
              onMenuClose: function() {
                console.log('Menu closed');
              },
              onMenuButtonClose: function() {
                console.log(
                  'Menu close button clicked');
              }
            });
          </script>

        </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.
    • Add has-label to the button to display the text label with the menu icon.
  • The logo is always visible.
    • Switch to the Firefox logo by adding the class mzp-t-firefox to the element with class="mzp-c-navigation-logo"
  • 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).
  • Navigation can opt-in to sticky scroll behaviour by adding the class mzp-is-sticky.
    • Sticky behaviour will only be applied to viewports that are wider than $mq-md and taller than $mq-tall.