Navigation
Main site Navigation organism, with logo, Menu and Download Button molecules.
<div class="mzp-c-navigation ">
<div class="mzp-c-navigation-l-content">
<div class="mzp-c-navigation-container">
<button class="mzp-c-navigation-menu-button"
type="button"
aria-controls="patterns.organisms.navigation.navigation">Menu</button>
<div class="mzp-c-navigation-items"
id="patterns.organisms.navigation.navigation">
<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">Firefox</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
Firefox menu</button>
<div class="mzp-c-menu-panel-content">
<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>
<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 ">
<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>
<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 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="../../../static/img/card/card-image.png" alt="">
</div>
<div class="mzp-c-card-content">
<div class="mzp-c-card-tag">Card tag</div>
<h2 class="mzp-c-card-title">Headline that goes onto a second or third line</h2>
<p class="mzp-c-card-meta">6 hours ago</p>
</div>
</a>
</section>
</div>
</div>
</div>
</li>
</ul>
</nav>
<script
src="../../../assets/protocol/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>
</div>
</div>
</div>Notes
- 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-firefoxto the element withclass="mzp-c-navigation-logo"
- Switch to the Firefox logo by adding the class
- Navigation can be initialized using
Mzp.Navigation.init(options), whereoptionsis 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-mdand taller than$mq-tall. - Sticky behaviour will never be applied for users who prefer reduced motion.
- Sticky behaviour will only be applied to viewports that are wider than