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

Additional classes can be added to your dropdown to change its appearance.

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}}
*** Available class options: * `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 ##### Hoverable Dropdown Option If you'd rather have your dropdown be accessible by hover, you can add a data-option to the target element:

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}} *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

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