---
title: Dropdowns
---
***
{{> 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
***
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.
{{> 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.
{{> examples_dropdown_pip_directions}}
For buttons wider than the dropdown, the entire dropdown is centered.
{{> 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`.
{{> 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";
```