Problems with drilldown menu: cannot read property 'Nest' of undefined

Hi,
I’m working on a WordPress theme and I’m structuring a drilldown menu with Foundation 6.

The problem is, it gives me this error when I load the page:

Schermata 2020-02-09 alle 19.00.47

I’m loading all the .js files required to make the drilldown work (foundation.core.js, foundation.drilldown.js, foundation.util.keyboard.js, foundation.util.nest.js, foundation.util.box.js).

This is the simplified HTML structure of my menu:

<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
    <li id="menu-item-72" class="menu-item">
        <a href="#">Home</a>
    </li>
    <li id="menu-item-73" class="menu-item">
        <a href="#">Element</a>
        <ul class="sub-menu">
            <li id="menu-item-76" class="menu-item">
                <a href="#">Sample Page</a>
            </li>
        </ul>
    </li>
</ul>

And this is the js code I use to trigger the drilldown:

jQuery( document ).ready( function( $ ){
    var menu = new Foundation.Drilldown( $( 'ul.vertical.menu.drilldown' ) );
}

What am I missing here?
Thank you.

Hi,

can you provide a reproducible testcase as codepen and provide more info about your Foundation Sites version?

Also in which order do you load the files?

Hi Daniel, it was indeed a problem of ordering.
Now I’m loading core > nest > keyboard > box > drilldown, and it’s all working well.

Thank you.

Hi,

thanks for the feedback that it is working now.