Mozilla Protocol
- 21.1.0
-
An expandable menu used in the Navigation component, consisting of Menu Items and an optional Card component.
Usage
Import using Webpack as an ES module:
import MzpMenu from '@mozilla-protocol/core/protocol/js/menu';Import using Webpack as CommonJS:
const MzpMenu = require('@mozilla-protocol/core/protocol/js/menu');Import as a global variable via a <script> tag:
const MzpMenu = window.MzpMenu;You can then initialize the component using init().
MzpMenu.init();You can also pass custom callbacks for menu open and close events as a configuration object like so:
MzpMenu.init({
onMenuOpen: function () {
console.log('Menu opened');
},
onMenuClose: function () {
console.log('Menu closed');
},
onMenuButtonClose: function () {
console.log(
'Menu close button clicked');
}
})Tips
- Make sure to initialize the component after the DOM has loaded.
- On wide viewports a menu’s content is displayed when hovering or focusing on a menu link.
- On small viewports a menu’s content is expanded/collapsed when clicking on a menu link.
- Menu content should consist of two lists of one or more Menu Items.
- An Extra Small Card can also be included inside a menu
using the
mzp-has-cardclass. Cards are only visible on wide viewports. - A menu can also feature regular links that do not expand on hover/click by
omitting the
mzp-has-drop-downandmzp-js-expandableclasses. - A menu with a state class of
mzp-is-basicis accessible without JavaScript. This state class gets replaced withmzp-is-enhancedwhen JS is executed.
<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>