Foundation Dropdowns | Tutorial
Foundation dropdowns allow users to select a value from a predefined dropdown list:
### Example
Dropdown Button
$(document).ready(function() {
$(document).foundation();
})
[Try it »](#)
### Example Explained
The `.dropdown` class adds a downward arrow "icon" to the button.
Use the `data-dropdown="id"` attribute on the button or link to open the dropdown menu.
The _id_ value needs to match the dropdown menu content (id01).
Add the `.f-dropdown` class and the `data-dropdown-content` attribute to a
,
, or `` to create the dropdown menu content.
Finally, initialize Foundation JS.
**Note:** On small screens, the width of all dropdown menus is 100%.
* * *
## Dropdown Sizes
Use `.tiny`, `.small`, `.medium`, `.large`, or `.mega` to modify the width of the dropdown menu.
**Note:** On small screens, the width of all dropdown menus is 100%.
### Example
..
..
..
..
[Try it »](#)
* * *
## Dropdown Padding
You can use the `.content` class to add padding to the dropdown menu:
### Example
..
..
[Try it »](#)
* * *
## Other Examples
Adding multimedia elements inside a dropdown menu:
### Example
Dropdown Button
Paris Title
Some text.. some text..
Paris, je t'aime.
[Try it »](#)
* * *
## Dropdown Direction
By default, the dropdown menu appears at the bottom. You can change its direction by adding `data-options="align:left|right|top"`:
### Example
Right
Top
Bottom
Left
[Try it »](#)
* * *
## Dropdown Trigger Condition
By default, the dropdown menu is displayed after clicking the button. If you need it to display on hover, you can use the `data-options="is_hover:true"` attribute on the button:
### Example
Hover over me
[Try it »](#)
* * *
## Split Buttons
We can add the `.split` class to a button to create a split button effect. After splitting, a downward arrow icon button will be generated on the
element:
### Example
Split Button
$(document).ready(function() {
$(document).foundation();
})
[Try it »](#) 
YouTip