Dropdown Menu

JavaScript

Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.

Horizontal

Dropdown menus build on the Menu component's syntax. Add the class .dropdown and the attribute data-dropdown-menu to the menu container to set up the dropdown.

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

To create dropdown menus, nest a new <ul> inside an <li>. You can nest further to create more levels of dropdowns.

Watch this part in video

Note that the <ul> goes after the <a>, and not inside of it.

edit on codepen button
<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

Vertical

Add the .vertical class to the top-level menu to make it vertical. Sub-menus are automatically vertical, regardless of the orientation of the top-level menu.

Menus are block-level elements, which means they stretch to fill the width of their container. To make the below example less goofy, we've hard-coded a max-width on the menu.

edit on codepen button
<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu nested">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <!-- ... -->
</ul>

See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.


Preventing FOUC

Before the JavaScript on your page loads, the dropdown menus will not have arrows. However, once the JavaScript file has loaded, the arrows will appear causing a flash of unstyled content. You can prevent this by adding the .is-dropdown-submenu-parent class manually.

<ul class="dropdown menu" data-dropdown-menu>
  <li class="is-dropdown-submenu-parent">
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$dropdownmenu-arrows Boolean true

Enables arrows for items with dropdown menus.

$dropdownmenu-arrow-color Color $anchor-color

Sets dropdown menu arrow color if arrow is used.

$dropdownmenu-arrow-size Length 6px

Sets dropdown menu arrow size if arrow is used.

$dropdownmenu-arrow-padding Length 1.5rem

Sets dropdown menu arrow padding for aligning the arrow correctly.

$dropdownmenu-min-width Length 200px

Minimum width of dropdown sub-menus.

$dropdownmenu-background Color null

Background color for top level items.

$dropdownmenu-submenu-background Color $white

Background color for dropdowns.

$dropdownmenu-padding Number $global-menu-padding

Padding for top level items.

$dropdownmenu-nested-margin Number 0

Sets dropdown menu nested margin

$dropdownmenu-submenu-padding Number $dropdownmenu-padding

Padding for sub-menu items.

$dropdownmenu-border List 1px solid $medium-gray

Border for dropdown sub-menus.

$dropdown-menu-item-color-active Color get-color(primary)

Text color of an active dropdown menu item. Explicit override for menu defaults

$dropdown-menu-item-background-active Color transparent

Background color of an active dropdown menu item. Explicit override for menu defaults


JavaScript Reference

Initializing

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

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

Foundation.DropdownMenu

Creates a new instance of DropdownMenu.

var elem = new Foundation.DropdownMenu(element, options);

Fires these events: DropdownMenu#event:init

NameTypeDescription
element jQuery jQuery object to make into a dropdown menu.
options Object Overrides to the default plugin settings.

Plugin Options

Use these options to customize an instance of Dropdown 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-disable-hover boolean false Disallows hover events from opening submenus
data-disable-hover-on-touch boolean true Disallows hover on touch devices
data-autoclose boolean true Allow a submenu to automatically close on a mouseleave event, if not clicked open.
data-hover-delay number 50 Amount of time to delay opening a submenu on hover event.
data-click-open boolean false Allow a submenu to open/remain open on parent click event. Allows cursor to move away from menu.
data-closing-time number 500 Amount of time to delay closing a submenu on a mouseleave event.
data-alignment string auto Position of the menu relative to what direction the submenus should open. Handled by JS. Can be `'auto'`, `'left'` or `'right'`.
data-close-on-click boolean true Allow clicks on the body to close any open submenus.
data-close-on-click-inside boolean true Allow clicks on leaf anchor links to close any open submenus.
data-vertical-class string vertical Class applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.
data-right-class string align-right Class applied to right-side oriented menus, Foundation default is `align-right`. Update this if using your own class.
data-force-follow boolean true Boolean to force overide the clicking of links to perform default action, on second touch event for mobile.

Events

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

NameDescription
show.zf.dropdownMenu Fires when the new dropdown pane is visible.
hide.zf.dropdownMenu Fires when the open menus are closed.

Methods

_destroy

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

Destroys the plugin.