Mozilla Protocol
- 19.1.0
-
A page footer component, containing common links to complement primary navigation and flexible structure. It is best viewed with “full view” as it’s meant to take up the full width of the page.
Usage
Import using Webpack as an ES module:
import MzpFooter from '@mozilla-protocol/core/protocol/js/footer';Import using Webpack as CommonJS:
const MzpFooter = require('@mozilla-protocol/core/protocol/js/footer');Import as a global variable via a <script> tag:
const MzpFooter = window.MzpFooter;You can then initialize the component using init().
MzpFooter.init();Dependencies
The Footer component depends on the Details component in order to support expandable sections on small viewports.
It is recommended to include MzpDetails in your page as a global object before loading your Footer component script.
import MzpDetails from '@mozilla-protocol/core/protocol/js/details');
window.MzpDetails = MzpDetails;Tips
- Make sure to initialize the component after the DOM has loaded.
The Footer component supports several optional elements including:
- logo
- footer-sections (with links)
- language selector
- social media icons.
This demo includes all optional elements and six footer sections (footer sections will be evenly spaced across component width whatever number you use).
See Example Basic for a simpler demo.
<footer class="mzp-c-footer">
<div class="mzp-l-content">
<nav class="mzp-c-footer-primary">
<div class="mzp-c-footer-primary-logo">
<a href="https://www.mozilla.org/">Mozilla</a>
</div>
<div class="mzp-c-footer-sections">
<section class="mzp-c-footer-section">
<h5 class="mzp-c-footer-heading">
Topic
</h5>
<ul class="mzp-c-footer-list">
<li>
<a href="https://www.mozilla.org/firefox/new/">Link One</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/">Link Two</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/mobile/">Link Three</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/features/">Link Four</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Long link just to mix things up and cause problems.</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Link Six</a>
</li>
</ul>
</section>
<section class="mzp-c-footer-section">
<h5 class="mzp-c-footer-heading">
Topic
</h5>
<ul class="mzp-c-footer-list">
<li>
<a href="https://www.mozilla.org/firefox/new/">Link One</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/">Link Two</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/mobile/">Link Three</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/features/">Link Four</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Long link just to mix things up and cause problems.</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Link Six</a>
</li>
</ul>
</section>
<section class="mzp-c-footer-section">
<h5 class="mzp-c-footer-heading">
Topic
</h5>
<ul class="mzp-c-footer-list">
<li>
<a href="https://www.mozilla.org/firefox/new/">Link One</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/">Link Two</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/mobile/">Link Three</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/features/">Link Four</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Long link just to mix things up and cause problems.</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Link Six</a>
</li>
</ul>
</section>
<section class="mzp-c-footer-section">
<h5 class="mzp-c-footer-heading">
Topic
</h5>
<ul class="mzp-c-footer-list">
<li>
<a href="https://www.mozilla.org/firefox/new/">Link One</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/">Link Two</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/mobile/">Link Three</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/features/">Link Four</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Long link just to mix things up and cause problems.</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Link Six</a>
</li>
</ul>
</section>
<section class="mzp-c-footer-section">
<h5 class="mzp-c-footer-heading">
Topic
</h5>
<ul class="mzp-c-footer-list">
<li>
<a href="https://www.mozilla.org/firefox/new/">Link One</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/">Link Two</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/mobile/">Link Three</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/features/">Link Four</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Long link just to mix things up and cause problems.</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Link Six</a>
</li>
</ul>
</section>
<section class="mzp-c-footer-section">
<h5 class="mzp-c-footer-heading">
Topic
</h5>
<ul class="mzp-c-footer-list">
<li>
<a href="https://www.mozilla.org/firefox/new/">Link One</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/">Link Two</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/mobile/">Link Three</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/features/">Link Four</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Long link just to mix things up and cause problems.</a>
</li>
<li>
<a href="https://www.mozilla.org/firefox/channel/desktop/">Link Six</a>
</li>
</ul>
</section>
</div>
</nav>
<nav class="mzp-c-footer-secondary">
<div class="mzp-c-footer-language">
<form class="mzp-c-language-switcher" method="get" action="#">
<label for="mzp-c-language-switcher-select">Language</label>
<select name="language" id="mzp-c-language-switcher-select" class="mzp-js-language-switcher-select">
<option value="en">English</option>
<option value="de">Deutsch</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="hi-IN">हिन्दी (भारत)</option>
<option value="ja">日本語</option>
</select>
<!-- form submit button is shown when JavaScript is not enabled -->
<button type="submit">Go</button>
</form>
<script src="../../protocol/js/lang-switcher.js"></script>
<script>
(function() {
'use strict';
// a custom callback can be passed to the lang switcher for analytics purposes.
MzpLangSwitcher.init(function(previousLanguage, newLanguage) {
console.log('Previous language:', previousLanguage);
console.log('New language:', newLanguage);
});
})();
</script>
</div>
<ul class="mzp-c-footer-links-social">
<li>
<a class="twitter" href="https://twitter.com/firefox">Twitter<span> (@firefox)</span></a>
</li>
<li>
<a class="youtube" href="https://www.youtube.com/firefoxchannel">YouTube<span> (firefoxchannel)</span></a>
</li>
</ul>
<div class="mzp-c-footer-legal">
<p class="mzp-c-footer-license">
Visit Mozilla Corporation’s not-for-profit parent, the <a href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br>
Portions of this content are ©1998–2022 by individual mozilla.org contributors.<br>
Content available under a <a rel="license" href="https://www.mozilla.org/foundation/licensing/website-content/">Creative Commons license</a>.
</p>
<ul class="mzp-c-footer-terms">
<li><a href="https://www.mozilla.org/privacy/websites/">Website Privacy Notice</a></li>
<li><a href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a></li>
<li><a href="https://www.mozilla.org/about/legal/">Legal</a></li>
<li><a href="https://www.mozilla.org/privacy/websites/">Website Privacy Notice</a></li>
<li><a href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a></li>
<li><a href="https://www.mozilla.org/about/legal/">Legal</a></li>
</ul>
</div>
</nav>
</div>
</footer>
<!-- Use these scripts with footer sections to get expandable titles on mobile screens -->
<script src="../../protocol/js/details.js"></script>
<script src="../../protocol/js/footer.js"></script>
<script>
window.MzpFooter.init();
</script>