Mozilla Protocol
- 19.1.0
-
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-labelto the button to display the text label with the menu icon.
- Add
- The logo is always visible.
- Switch to the Firefox logo by adding the class
mzp-t-firefoxabove the element withclass="mzp-c-navigation-logo"
- Switch to the Firefox logo by adding the class
- 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-mdand taller than$mq-tall. - Sticky behavior will never be applied for users who prefer reduced motion.
- Sticky behavior will only be applied to viewports that are wider than
<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>