Navigation

300 × 150

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

Usage

Import using Webpack as an ES module:

import MzpNavigation from '@mozilla-protocol/core/protocol/js/navigation';

Import using Webpack as CommonJS:

const MzpNavigation = require('@mozilla-protocol/core/protocol/js/navigation');

Import as a global variable via a <script> tag:

const MzpNavigation = window.MzpNavigation;

You can then initialize the component using init().

MzpNavigation.init();

You can also pass custom callbacks for nav open and close events as a configuration object like so:

MzpNavigation.init({
  onNavOpen: function () {
    console.log('Navigation opened');
  },
  onNavClose: function () {
    console.log('Navigation closed');
  }
})

Dependencies

The Menu component is a child of the Navigation component, and is therefore a dependency. You need to import the MzpMenu component as a global variable and initialize it along side MzpNavigation.

import MzpMenu from '@mozilla-protocol/core/protocol/js/menu');

window.MzpMenu = MzpMenu;

window.MzpMenu.init();

Tips

  • Make sure to initialize the component after the DOM has loaded.
  • 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 opt-in to sticky scroll behavior by adding the class mzp-is-sticky.
    • Sticky behavior will only be applied to viewports that are wider than $mq-md and taller than $mq-tall.
    • Sticky behavior 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-c-navigation-logo">
                <a href="https://www.mozilla.org/">Mozilla</a>
            </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>

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

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

                                                        </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/menu.js"></script>

                    <script>
                        window.MzpMenu.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>
                        <small class="mzp-c-button-download-privacy-link">
                            <a href="https://www.mozilla.org/privacy/firefox/">Firefox Privacy Notice</a>
                        </small>
                    </div>

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

<script src="../../protocol/js/navigation.js"></script>
<script>
    window.MzpNavigation.init();
</script>

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