Drilldown Menu


Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.


Drilldowns use the standard Menu syntax, using <ul>, <li>, and <a>. Add data-drilldown to the root menu to set up the drilldown.

To create sub-menus, place a <ul> next to an <a>. Clicking that <a> will then open the <ul> that it's next to.

Any <a> without a submenu will function like a normal link.

Watch this part in video

edit on codepen button
<ul class="vertical menu drilldown" data-drilldown>
  <li><a href="#">One</a></li>
    <a href="#">Two</a>
    <ul class="menu vertical nested">
      <li><a href="#">Two A</a></li>
      <li><a href="#">Two B</a></li>
      <li><a href="#">Two C</a></li>
      <li><a href="#">Two D</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>

The drilldown menu takes on the height of the tallest menu in the hierarchy, so the menu doesn't change height as the user navigates it.


If you like to set the height to auto you can also set the autoHeight and animateHeight params

Watch this part in video

edit on codepen button
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
  <!--  -->

ScrollTop Drilldown

Scroll to the top of the menu when selecting a submenu/navigating back using the menu back button. Can be useful with a longer menu to provide a better user experience.
edit on codepen button
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true">
  <!--  -->

Custom Styling

The drilldown plugin automatically adds a back button to the top of each nested menu. To style this control, target the .js-drilldown-back class:

.js-drilldown-back {
  // ...

JavaScript Reference


The following files must be included in your JavaScript to use this plugin:

  • foundation.core.js
  • foundation.drilldown.js
    • With utility library foundation.util.keyboard.js
    • With utility library foundation.util.nest.js
    • With utility library foundation.util.box.js


Creates a new instance of a drilldown menu.

var elem = new Foundation.Drilldown(element, options);
element jQuery jQuery object to make into an accordion menu.
options Object Overrides to the default plugin settings.

Plugin Options

Use these options to customize an instance of Drilldown Menu. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name Type Default Description
data-auto-apply-class boolian true Drilldowns depend on styles in order to function properly; in the default build of Foundation these are on the `drilldown` class. This option auto-applies this class to the drilldown upon initialization.
data-back-button string
  • Back
  • Markup used for JS generated back button. Prepended or appended (see backButtonPosition) to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\`) if copy and pasting.
    data-back-button-position string top Position the back button either at the top or bottom of drilldown submenus. Can be `'left'` or `'bottom'`.
    data-wrapper string
    Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting.
    data-parent-link boolean false Adds the parent link to the submenu.
    data-close-on-click boolean false Allow the menu to return to root list on body click.
    data-auto-height boolean false Allow the menu to auto adjust height.
    data-animate-height boolean false Animate the auto adjust height.
    data-scroll-top boolean false Scroll to the top of the menu after opening a submenu or navigating back using the menu back button
    data-scroll-top-element string '' String jquery selector (for example 'body') of element to take offset().top from, if empty string the drilldown menu offset().top is taken
    data-scroll-top-offset number 0 ScrollTop offset
    data-animation-duration number 500 Scroll animation duration
    data-animation-easing string swing Scroll animation easing. Can be `'swing'` or `'linear'`.


    These events will fire from any element with a Drilldown Menu plugin attached.

    scrollme.zf.drilldown Fires after the menu has scrolled
    closed.zf.drilldown Fires when the menu is fully closed.
    open.zf.drilldown Fires when the submenu has opened.
    hide.zf.drilldown Fires when the submenu has closed.




    Scroll to Top of Element or data-scroll-top-element

    Fires these events: Drilldown#event:scrollme



    Closes all open elements, and returns to root menu.

    Fires these events: Drilldown#event:closed


    $('#element').foundation('_back', $elem);

    Adds event listener for each back button, and closes open menus.

    Fires these events: Drilldown#event:back

    $elem jQuery the current sub-menu to add `back` event.


    $('#element').foundation('_show', $elem);

    Opens a submenu.

    Fires these events: Drilldown#event:open

    $elem jQuery the current element with a submenu to open, i.e. the `li` tag.


    $('#element').foundation('_hide', $elem);

    Hides a submenu

    Fires these events: Drilldown#event:hide

    $elem jQuery the current sub-menu to hide, i.e. the `ul` tag.



    Destroys the Drilldown Menu