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.

The optional elements are:

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.

Tips

  • Add Details Component script and Footer script to collapse footer sections into expandable titles on mobile screens.
<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="de">Deutsch</option>
                        <option value="en">English</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/protocol-lang-switcher.js">
                </script>

                <script>
                    (function() {
                        'use strict';
                        // a custom callback can be passed to the lang switcher for analytics purposes.
                        Mzp.LangSwitcher.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/protocol-details.js"></script>
<script src="../../protocol/js/protocol-footer.js"></script>