Skip to content

Collapsible Menu

Use this class to allow elements to toggle at 60em and below.

Installation

Note: This class is pre-installed and loaded asynchronously with Genesis out of the box.

Add import CollapsibleMenu from 'extensions/collapsible-menu'; to your Global.js file.

Example Usage

.mvt

Your parent element, which will toggle the g-menu--collapsed class, should have a class of js-collapsible-menu

With in your parent element, there should be atleast 1 toggle with the class of js-collapsible-menu__toggle. You may have multiple of these if needed.

<nav id="js-static-navigation" class="g-static-navigation g-menu--collapsed js-collapsible-menu">
    <div class="g-static-navigation__heading u-hidden u-shown--l">
        Support
    </div>
    <button id="js-static-navigation-control" type="button" class="g-static-navigation__label g-button--no-styling js-collapsible-menu__toggle u-flex u-hidden--l" for="static-links" tabindex="0" aria-controls="static-links-list" aria-expanded="true">
        <span class="u-icon-list g-static-navigation__heading-icon" aria-hidden="true"></span> Support Menu
    </button>
    <nav id="static-links-list" class="g-static-links__navigation" role="region" aria-labelledby="static-links-toggle">
        <ul id="js-static-page-links" class="g-static-links__list g-list-inline" role="menubar" aria-label="Support Navigation">
            <mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
                <mvt:assign name="l.settings:navigationitem:classes" value="'g-static-links__list-link'" />
                <mvt:if expr="l.settings:navigationitem:link_dest EQ l.settings:page:code">
                    <mvt:assign name="l.settings:navigationitem:classes" value="l.settings:navigationitem:classes $ ' g-static-links--current'" />
                </mvt:if>

                <mvt:assign name="l.settings:navigationitem:tabindex" value="-1" />
                <mvt:if expr="l.pos1 EQ 1">
                    <mvt:assign name="l.settings:navigationitem:tabindex" value="0" />
                </mvt:if>

                <li class="g-static-links__list-item" role="none">
                    <a href="&mvte:navigationitem:url;" class="&mvte:navigationitem:classes;" target="&mvte:navigationitem:link_targ;" role="menuitem" aria-haspopup="false" aria-expanded="false" tabindex="&mvte:navigationitem:tabindex;">
                        &mvt:navigationitem:name;
                    </a>
                </li>
            </mvt:foreach>
        </ul>
    </nav>
</nav>

.js

Initialize the CollapsibleMenu class:

Preferred asynchronous initialization:

(async () => {
    const menuElements = document.getElementsByClassName('js-collapsible-menu');

    if (menuElements.length === 0) {
        return;
    }

    const {default: CollapsibleMenu} = await import('extensions/collapsible-menu');

    new CollapsibleMenu(menuElements);
})();

Options

The CollapsibleMenu class takes 2 parameters:

Name Type Description
menuElements Elements List of parent elements