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

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,

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

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

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

What am I missing here?
Thank you.


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.


thanks for the feedback that it is working now.