components/navigation/01-navigation/navigation.html

{# @navigation
#
# parameters:
# is_sticky     - boolean
# is_firefox    - boolean
# label         - string
#}
<div class="mzp-c-navigation {% if is_sticky %}mzp-is-sticky{% endif %}">
  <div class="mzp-c-navigation-l-content">
    <div class="mzp-c-navigation-container">
      <button class="mzp-c-navigation-menu-button" type="button" aria-controls="navigation-demo">
        {% if label %}{{ label }}{% else %}Menu{% endif %}
      </button>

      {% if is_firefox %}
        <div class="mzp-t-firefox">
          <div class="mzp-c-navigation-logo">
              <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>
          </div>
        </div>
      {% else %}
        <div class="mzp-c-navigation-logo">
          <a href="https://www.mozilla.org/">Mozilla</a>
        </div>
      {% endif %}

      <div class="mzp-c-navigation-items" id="navigation-demo">
        <div class="mzp-c-navigation-menu">
          {% render '@menu' %}
        </div>
        <div class="mzp-c-navigation-download">
          {% render '@download-button--secondary', { show_both: False } %}
        </div>
      </div>
    </div>
  </div>
</div>

<script src="{{ '/protocol/js/navigation.js' | path }}"></script>
<script>window.MzpNavigation.init();</script>

{% block content %}
  <!-- demo content to show nav behavior on scroll -->
  <main class="mzp-l-content">
    <section>
      <h1>Demo content to show scroll behavior</h1>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates,
        unde. Illum accusantium molestiae inventore ex molestias consequuntur?</p>
      <p>Exercitationem id aut maxime distinctio autem! Iste incidunt fuga
        voluptate amet. Officiis unde ex deleniti ad velit optio qui accusantium,
        id suscipit eius nemo exercitationem quae enim consequatur. Quas vitae,
        amet rem beatae sequi porro.</p>
      <p>Numquam esse, minima ullam architecto vel ipsa voluptatum unde ut odit
        aliquam corporis et deleniti earum a maxime dicta sapiente iste
        consequatur iusto delectus voluptas veniam nam alias.</p>
      <p>Nesciunt harum iure delectus eveniet consequuntur quod, beatae cupiditate
        soluta eos, temporibus minus quas, ducimus nulla asperiores provident
        voluptas repudiandae!</p>
    </section>

    <section>
      <h2>Demo content to show scroll behavior</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates,
        unde. Illum accusantium molestiae inventore ex molestias consequuntur?</p>
      <p>Exercitationem id aut maxime distinctio autem! Iste incidunt fuga
        voluptate amet. Officiis unde ex deleniti ad velit optio qui accusantium,
        id suscipit eius nemo exercitationem quae enim consequatur. Quas vitae,
        amet rem beatae sequi porro.</p>
      <p>Numquam esse, minima ullam architecto vel ipsa voluptatum unde ut odit
        aliquam corporis et deleniti earum a maxime dicta sapiente iste
        consequatur iusto delectus voluptas veniam nam alias.</p>
      <p>Nesciunt harum iure delectus eveniet consequuntur quod, beatae cupiditate
        soluta eos, temporibus minus quas, ducimus nulla asperiores provident
        voluptas repudiandae!</p>
    </section>

    <section>
      <h2>Demo content to show scroll behavior</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates,
        unde. Illum accusantium molestiae inventore ex molestias consequuntur?</p>
      <p>Exercitationem id aut maxime distinctio autem! Iste incidunt fuga
        voluptate amet. Officiis unde ex deleniti ad velit optio qui accusantium,
        id suscipit eius nemo exercitationem quae enim consequatur. Quas vitae,
        amet rem beatae sequi porro.</p>
      <p>Numquam esse, minima ullam architecto vel ipsa voluptatum unde ut odit
        aliquam corporis et deleniti earum a maxime dicta sapiente iste
        consequatur iusto delectus voluptas veniam nam alias.</p>
      <p>Nesciunt harum iure delectus eveniet consequuntur quod, beatae cupiditate
        soluta eos, temporibus minus quas, ducimus nulla asperiores provident
        voluptas repudiandae!</p>
    </section>

    <section>
      <h2>Demo content to show scroll behavior</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates,
        unde. Illum accusantium molestiae inventore ex molestias consequuntur?</p>
      <p>Exercitationem id aut maxime distinctio autem! Iste incidunt fuga
        voluptate amet. Officiis unde ex deleniti ad velit optio qui accusantium,
        id suscipit eius nemo exercitationem quae enim consequatur. Quas vitae,
        amet rem beatae sequi porro.</p>
      <p>Numquam esse, minima ullam architecto vel ipsa voluptatum unde ut odit
        aliquam corporis et deleniti earum a maxime dicta sapiente iste
        consequatur iusto delectus voluptas veniam nam alias.</p>
      <p>Nesciunt harum iure delectus eveniet consequuntur quod, beatae cupiditate
        soluta eos, temporibus minus quas, ducimus nulla asperiores provident
        voluptas repudiandae!</p>
    </section>
  </main>
{% endblock %}