Foundation Button Group

Button Group

Foundation allows you to create a series of buttons in the same row.

You can create a button group using the <ul> element and adding the .button-group class:

Example

<ul class="button-group">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

Vertical Button Group

Vertical button groups are created using the .stack class. Note that the buttons will span the full width of their parent element:

Example

<ul class="button-group stack">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

The .stack-for-small class is used for small screens, where the buttons change from horizontal to vertical alignment:

Example

<ul class="button-group stack-for-small">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

Rounded Button Group

Use the .radius and .round classes in the button group to add rounded corners to the buttons:

Example

<ul class="button-group radius">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>
<ul class="button-group round">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

Evenly Spaced Button Group

The .even-num class is used to evenly distribute the width of buttons in the group and span 100% of the parent element.

num represents the number of buttons in the group, from 1 to 8:

Example

<ul class="button-group even-3">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>
<ul class="button-group even-5">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
  <li><button type="button" class="button">HTC</button></li>
  <li><button type="button" class="button">Huawei</button></li>
</ul>
<ul class="button-group even-8">
  <li><button type="button" class="button">A</button></li>
  <li><button type="button" class="button">B</button></li>
  <li><button type="button" class="button">C</button></li>
  <li><button type="button" class="button">D</button></li>
  <li><button type="button" class="button">E</button></li>
  <li><button type="button" class="button">F</button></li>
  <li><button type="button" class="button">G</button></li>
  <li><button type="button" class="button">H</button></li>
</ul>

Dropdown Button

Dropdown buttons allow users to select predefined values:

Example

<!-- Trigger the dropdown -->
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
<!-- The actual dropdown -->
<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
  $(document).foundation();
})
</script>

Example Explanation

The .dropdown class creates a dropdown button.

Use a button or link with the data-dropdown="" attribute to open the dropdown menu.

The id value needs to match the content of the dropdown (id01).

Add the .f-dropdown class and data-dropdown-content attribute to the <ul> to create the dropdown content.

Finally, initialize Foundation JS.

Split Button

You can also create a split button dropdown. Simply add the .split class to the button and use a span element to create a directional arrow button:

Example

<button class="button split">Split Button
  <span data-dropdown="id01"></span>
</button>
<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
  $(document).foundation();
})
</script>