An expandable menu used in the Navigation component, consisting of Menu Items and an optional Card component.

  • 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-card class. 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-down and mzp-js-expandable classes.
  • A menu with a state class of mzp-is-basic is accessible without JavaScript. This state class gets replaced with mzp-is-enhanced when JS is executed.
  • A menu can be initialized using Mzp.Menu.init(options), where options is an Object with the following properties.
    • onMenuOpen [Function] callback when a menu is opened (optional).
    • onMenuClose [Function] callback when a menu is closed (optional).
    • onMenuButtonClose [Function] callback when a menu close button is clicked (optional).
<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>

                                        <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 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/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>