--- title: Dropdowns layout: component.html ---

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}}
When the dropdown does not fit in the container, it will automatically be changed to align: bottom. If this is not the desired behavior, you can override this by specifying the ignore_repositioning property in the data-options. ---

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"; ```