Dropdown
JavaScriptDropdown panes are little happy sprites which can be revealed on click or hover.
You might be looking for dropdown menus, which are a separate plugin.
Basics
To create a dropdown pane, add the class .dropdown-pane and the attribute data-dropdown to an element. Give the dropdown a unique ID as well.
To create the dropdown trigger, add data-toggle to a <button>. The value of data-toggle is the ID of the dropdown.
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Just some junk that needs to be said. Or not. Your choice.
</div>
Positioning
By default, a dropdown anchors below the button that opened it. Add the class .top, .right, or .bottom to the dropdown to change this.
<button class="button" type="button" data-toggle="example-dropdown2">Top Aligned</button>
<div class="dropdown-pane top" id="example-dropdown2" data-dropdown>
Just some junk that needs to be said. Or not. Your choice.
</div>
Adding .float-right or .float-left to the anchor will change the direction of the dropdown as well.
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$dropdown-padding |
List | 1rem |
Padding for dropdown panes. |
$dropdown-border |
List | 1px solid $medium-gray |
Border for dropdown panes. |
$dropdown-font-size |
List | 1rem |
Font size for dropdown panes. |
$dropdown-width |
Number | 300px |
Width for dropdown panes. |
$dropdown-radius |
Number | $global-radius |
Border radius dropdown panes. |
$dropdown-sizes |
Map |
tiny: 100px |
Sizes for dropdown panes. Each size is a CSS class you can apply. |
Mixins
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
dropdown-container
@include dropdown-container;Applies styles for a basic dropdown.
JavaScript Reference
Initializing
The following files must be included in your JavaScript to use this plugin:
foundation.core.js-
foundation.dropdown.js- With utility library
foundation.util.keyboard.js - With utility library
foundation.util.box.js - With utility library
foundation.util.triggers.js
- With utility library
Foundation.Dropdown
Creates a new instance of a dropdown.
var elem = new Foundation.Dropdown(element, options);| Name | Type | Description |
|---|---|---|
element |
jQuery | jQuery object to make into a dropdown. Object should be of the dropdown panel, rather than its anchor. |
options |
Object | Overrides to the default plugin settings. |
Plugin Options
Use these options to customize an instance of Dropdown. 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-hover-delay |
|
|
Amount of time to delay opening a submenu on hover event. |
data-hover |
|
|
Allow submenus to open on hover events |
data-hover-pane |
|
|
Don't close dropdown when hovering over dropdown pane |
data-v-offset |
|
|
Number of pixels between the dropdown pane and the triggering element on open. |
data-h-offset |
|
|
Number of pixels between the dropdown pane and the triggering element on open. |
data-position-class |
|
|
Class applied to adjust open position. JS will test and fill this in. |
data-trap-focus |
|
|
Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands. |
data-auto-focus |
|
|
Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening. |
data-close-on-click |
|
|
Allows a click on the body to close the dropdown. |
Events
These events will fire from any element with a Dropdown plugin attached.
| Name | Description |
|---|---|
closeme.zf.dropdown |
Fires to close other open dropdowns |
show.zf.dropdown |
Fires once the dropdown is visible. |
Methods
getPositionClass
$('#element').foundation('getPositionClass');Helper function to determine current orientation of dropdown pane.
open
$('#element').foundation('open');Opens the dropdown pane, and fires a bubbling event to close other dropdowns.
Fires these events: Dropdown#event:closeme Dropdown#event:show
close
$('#element').foundation('close');Closes the open dropdown pane.
Fires these events: Dropdown#event:hide
toggle
$('#element').foundation('toggle');Toggles the dropdown pane's visibility.
destroy
$('#element').foundation('destroy');Destroys the dropdown.
