--- title: Dropdowns ---

We removed the various dropdowns within different UI elements for Foundation 5. Instead, we created a universal dropdown plugin that will attach dropdowns or popovers to whatever element you need.

*** {{> examples_dropdown_basic}}

Basic

You can create a dropdown using minimal markup. On a small device, the tooltips are full-width and bottom aligned.

HTML

{{> examples_dropdown_basic_rendered}}

HTML Rendered

{{> examples_dropdown_basic_nostyle}}

Advanced

Dropdown Classes

Additional classes can be added to your dropdown to change its appearance. * `tiny`: Make the dropdown have a max-width of 200px * `small`: Make the dropdown have a max-width of 300px * `medium`: Make the dropdown have a max-width of 500px * `large`: Make the dropdown have a max-width of 800px * `mega`: Make the dropdown go full 100% width * `content`: Add padding inside the dropdown for better-looking content

HTML

{{#markdown}} ```html Link Dropdown » ``` {{/markdown}}

Rendered HTML

Link Dropdown »
***

Directions

You can now position dropdowns on the top, bottom, left, or right of the target element. The default position is *bottom* and you do not need to change anything to get your tooltip positioned *bottom*. To set other alignments, just specify the align property in data-options on the target element.
{{#markdown}} ```html Link Dropdown » ``` {{/markdown}}
{{> examples_dropdown_directions}}
***

Pip Alignment

By default, the pip connecting the dropdown to the button is positioned at the left edge of the dropdown for top and bottom aligned dropdowns on the left half of the screen, at the right edge of the dropdown for top and bottom aligned dropdowns on the right half of the screen, and at the top edge of the dropdown for left and right aligned dropdowns. Adding pip: center to the data-options attribute will override this behavior and align the pip to the center of the button for all dropdown alignments.
{{#markdown}} ```html Link Dropdown » ``` {{/markdown}}
{{> examples_dropdown_pip_directions}}
For buttons wider than the dropdown, the entire dropdown is centered.
{{#markdown}} ```html Expanded Dropdown ``` {{/markdown}}
{{> examples_dropdown_pip_expand}}
***

Autoclose

There is an autoclose option that you can include in the mark up. This is an option that enables the dropdown to close automatically when a link is clicked within the dropdown. This option is enabled by default, but to disable (keep dropdowns persisting), set the attribute `aria-autoclose` to `false`.
{{#markdown}} ```html ``` {{/markdown}}
{{> examples_dropdown_autoclose}}
***

Hoverable Dropdown

If you'd rather have your dropdown be accessible by hover, you can add a data-option to the target element. There is also an optional setting `hover_timeout` that you can set to a time (in milliseconds) that will set your own custom delay to the element. The default setting for `hover_timeout` is 150ms.

HTML

{{> examples_dropdown_hoverable_rendered}}

Rendered HTML

{{> examples_dropdown_hoverable}}
***

Accessibility

This component is not yet accessible. Stay tuned for updates in future releases.

***

Customize with Sass

Dropdowns can be easily customized using our Sass variables.

SCSS

{{> examples_dropdown_variables}} ***

Semantic Markup With Sass

You can create your own dropdowns using our Sass mixins.

Basic

You can use the `dropdown-container()` and `dropdown-style()` mixins to create your own dropdowns, like so:
The Container Mixin

SCSS

{{#markdown}} ```scss .custom-dropdown-container-class { @include dropdown-container(); } ``` {{/markdown}}
The List Style Mixin

SCSS

{{#markdown}} ```scss .custom-dropdown-container-class { @include dropdown-container(); li { @include dropdown-style; } } ``` {{/markdown}}

Advanced

You can further customize your dropdowns with the options in the `dropdown-container()` mixin:

SCSS

{{#markdown}} ```scss .custom-dropdown-container-class { @include dropdown-container( // Sets list-style. Default: list. Options: [list, content] $content:list, // Sets if dropdown has triangle. Default:true. $triangle:true, // Sets max-width. Default: $f-dropdown-max-width $max-width ); li { @include dropdown-style; } } ``` {{/markdown}} ***

Configure With Javascript

It's easy to configure dropdowns using our provided Javascript. You can use data-attributes or plain old Javascript. Make sure `jquery.js`, `foundation.js` and `foundation.dropdown.js` have been included on your page before continuing. For example, add the following before the closing `` tag: {{#markdown}} ```html ``` {{/markdown}}

Optional Javascript Configuration

JS

{{#markdown}} ```js $(document).foundation({ dropdown: { // specify the class used for active dropdowns active_class: 'open' } }); ``` {{/markdown}} ***

Adding New Dropdown Content After Page Load

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following: {{#markdown}} ```javascript $(document).foundation(); ``` {{/markdown}} Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them. {{#markdown}} ```javascript $(document).foundation('dropdown', 'reflow'); ``` {{/markdown}} ***

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/dropdown"; ```