Foundation Button Group

Button Group

Foundation can create a series of buttons in the same row.

You can use<ul>element and add.button-groupClass to create a button group:

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>

Try it Yourself »

vertical button group

Using Vertical Button Groups.stackclass to create. Note that the buttons will span the entire width of the 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>

Try it Yourself »

.stack-for-smallclass is used for small-sized screens, causing the buttons to change from horizontal arrangement to vertical arrangement:

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>

Try it Yourself »

rounded button group

Use in Button Group.radiusand.roundClass to add rounded corner effects to 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>

Try it Yourself »

Evenly Stretched Button Group

.even-numclass is used to evenly distribute the width of buttons in a button group and span 100% of the parent element's width.

numFor the number of buttons in the button 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>

Try it Yourself »

Dropdown Menu Button

Dropdown menu buttons allow users to select preset 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>

Try it Yourself »

Example analysis

.dropdownClass to create a dropdown menu button.

use withdata-dropdown="id"The button or link with the attribute opens the dropdown menu.

idThe value needs to match the content of the dropdown menu (id01).

In<ul>Add to.f-dropdownclass anddata-dropdown-contentAttribute to create the content of the dropdown menu.

Finally, initialize Foundation JS.

Split Button

We can also create a split button dropdown menu. Just add in the button.splitclass 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>

Try it Yourself »
other extensions