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

<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

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

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

Name	Type	Description
`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`	`<li class="js-drilldown-back"><a tabindex="0">Back</a></li>`	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`	`<div></div>`	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'`.

Events

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

Name	Description
`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

Name	Type	Description
`$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

Name	Type	Description
`$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

Name	Type	Description
`$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

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

_destroy

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

Destroys the Drilldown Menu