Drilldown Menu

JavaScript

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

Basics

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>
  <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>
    </ul>
  </li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

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.

autoHeight

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">
  <!--  -->
</ul>

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">
  <!--  -->
</ul>

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

Initializing

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

Foundation.Drilldown

Creates a new instance of a drilldown menu.

var elem = new Foundation.Drilldown(element, options);
NameTypeDescription
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 boolean 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 &lt;li class&#x3D;&quot;js-drilldown-back&quot;&gt;&lt;a tabindex&#x3D;&quot;0&quot;&gt;Back&lt;/a&gt;&lt;/li&gt; 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 &lt;div&gt;&lt;/div&gt; 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 &#x27;&#x27; 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'`.

Events

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

NameDescription
scrollme.zf.drilldown Fires after the menu has scrolled
close.zf.drilldown Fires when the menu is closing.
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.

Methods

_scrollTop

$('#element').foundation('_scrollTop');

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

Fires these events: Drilldown#event:scrollme


_hideAll

$('#element').foundation('_hideAll');

Closes all open elements, and returns to root menu.

Fires these events: Drilldown#event:close Drilldown#event:closed


_back

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

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

Fires these events: Drilldown#event:back

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

_showMenu

$('#element').foundation('_showMenu', $elem, autoFocus);

Opens a specific drilldown (sub)menu no matter which (sub)menu in it is currently visible. Compared to _show() this lets you jump into any submenu without clicking through every submenu on the way to it.

Fires these events: Drilldown#event:open

NameTypeDescription
$elem jQuery the target (sub)menu (`ul` tag)
autoFocus boolean if true the first link in the target (sub)menu gets auto focused

_show

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

Opens a submenu.

Fires these events: Drilldown#event:open

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

_hide

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

Hides a submenu

Fires these events: Drilldown#event:hide

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

_destroy

$('#element').foundation('_destroy');

Destroys the Drilldown Menu