Main site Navigation, containing Menu and Secondary Download Button components.

  • 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 above 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.
    • Sticky behaviour will never be applied for users who prefer reduced motion.
<div class="mzp-c-navigation mzp-is-sticky">
    <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">
                Menu
            </button>

            <div class="mzp-t-firefox">
                <div class="mzp-c-navigation-logo">
                    <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>
                </div>
            </div>

            <div class="mzp-c-navigation-items" id="navigation-demo">
                <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">Sample Link with Popup</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 menu
                                        </button>
                                        <div class="mzp-c-menu-panel-content">
                                            <ul>
                                                <li>
                                                    <section class="mzp-c-menu-item  mzp-has-icon">
                                                        <div class="mzp-c-menu-item-head">
                                                            <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>

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

                                                        </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 mzp-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="../../img/image-3-2.jpg" alt="">
                                                    </div>
                                                    <div class="mzp-c-card-content">

                                                        <h2 class="mzp-c-card-title">A short title</h2>
                                                        <p class="mzp-c-card-desc">This is an optional card included in the menu. Only visible on wide viewports.</p>

                                                    </div>
                                                </a>
                                            </section>

                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>

                    <script src="../../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 class="mzp-c-navigation-download">

                    <div class="mzp-c-button-download-container">
                        <a href="#" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-md">
                            Download Firefox
                        </a>
                    </div>

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

<script src="../../protocol/js/protocol-navigation.js"></script>

<script>
    Mzp.Navigation.init()
</script>

<!-- demo content to show nav behavior on scroll -->
<main class="mzp-l-content">
    <section>
        <h1>Demo content to show scroll behaviour</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 behaviour</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>
        <h3>Demo content to show scroll behaviour</h3>
        <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>
        <h4>Demo content to show scroll behaviour</h4>
        <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>