Dropdown Menu
JavaScriptChange 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.
Note that the <ul>
goes after the <a>
, and not inside of it.
<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.
<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>
Sticky Navigation
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.
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.DropdownMenu
Creates a new instance of DropdownMenu.
var elem = new Foundation.DropdownMenu(element, options);
Fires these events: DropdownMenu#event:init
Name | Type | Description |
---|---|---|
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-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.
Name | Description |
---|---|
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.