Foundation
Jump to Nav

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

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: 300px;">
      <li><a href="#">Item 1</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.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$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-min-width` | Length | `200px` | Minimum width of dropdown sub-menus.
`$dropdownmenu-background` | Color | `$white` | Background color for dropdowns.
`$dropdownmenu-border` | List | `1px solid $medium-gray` | Border for dropdown sub-menus.

## JavaScript Reference

### Initializing

The file `foundation.dropdownMenu.js` must be included in your JavaScript to use this plugin, along with `foundation.core.js`. This plugin also requires these utility libraries:

- `foundation.util.keyboard.js`

- `foundation.util.box.js`

- `foundation.util.nest.js`

### 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` | `left` | Position of the menu relative to what direction the submenus should open. Handled by JS. Can be `'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.