* * *
## Button Groups
Foundation can create a series of buttons on the same line.
You can use the `
` element and add the `.button-group` class to create a button group:
### Example
[Try it »](#)
* * *
## Vertical Button Groups
Vertical button groups are created using the `.stack` class. Note that the buttons will span the entire width of the parent element:
### Example
[Try it »](#)
The `.stack-for-small` class is used for small-sized screens, where the buttons change from horizontal to vertical arrangement:
### Example
[Try it »](#)
* * *
## Rounded Button Groups
Use the `.radius` and `.round` classes in button groups to add rounded corner effects to the buttons:
### Example
[Try it »](#)
* * *
## Even-Width Button Groups
The `.even-num` class is used to evenly distribute the width of the buttons in a button group and span 100% of the parent element's width.
_num_ represents the number of buttons in the button group, from 1 to 8:
### Example
[Try it »](#)
* * *
## Dropdown Buttons
Dropdown buttons allow users to select predefined values:
### Example
Dropdown Button
$(document).ready(function() {
$(document).foundation();
})
[Try it »](#)
### Example Explained
The `.dropdown` class creates a dropdown button.
Use a button or link with the `data-dropdown="id"` attribute to open the dropdown menu.
The _id_ value needs to match the dropdown content (id01).
Add the `.f-dropdown` class and the `data-dropdown-content` attribute to the `
` to create the dropdown menu content.
Finally, initialize Foundation JS.
* * *
## Split Buttons
We can also create a dropdown menu for a split button. Simply add the `.split` class to the button and use a span element to generate a directional arrow button:
### Example
YouTip