---
title: Dropdown menus
layout: doc/layouts/default.html
---
# Dropdown
***
{{> examples_dropdown_basic}}
***
Basic
You can create a dropdown using minimal markup.
HTML
{{> examples_dropdown_basic_rendered}}
HTML Rendered
{{> examples_dropdown_basic_nostyle}}
***
Advanced
Additional classes can be added to your dropdown to change its appearance.
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
* `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}}
***
## 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
{{!-- TODO: Initialization is incorrect? --}}
{{#markdown}}
```js
$(document).foundation({
// 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";
```