Split Buttons

We've simplified our split buttons by getting rid of the dedicated dropdown associated with them. Instead, you'll use our new dropdown plugin to attach a dropdown to the button style of your choice.

Split Button
Split Button
Split Button
Split Button

Build With Predefined HTML Classes

There are two ways to build buttons in Foundation 4: with our predefined HTML classes or our structure and mixins. Building buttons using our predefined classes is simple, you'll need an <a>, <button> or <input> with a class of .button.split. This will create a default medium button. You can also use size, color and radius classes to control more of the style.

The classes options:

  • The size classes include: .tiny, .small, .medium or .large
  • The color classes include: .secondary, .alert or .success
  • The radius classes include: .radius or .round.
<!-- Size Classes -->
<a href="#" class="button split">Default Button <span></span></a>
<a href="#" class="tiny button split">Tiny Button <span></span></a>
<a href="#" class="small button split">Small Button <span></span></a>
<a href="#" class="large button split">Large Button <span></span></a>

<!-- Color Classes -->
<a href="#" class="button split secondary">Secondary Button <span></span></a>
<a href="#" class="button split success">Success Button <span></span></a>
<a href="#" class="button split alert">Alert Button <span></span></a>

<!-- Radius Classes -->
<a href="#" class="button split radius">Radius Button <span></span></a>
<a href="#" class="button split round">Round Button <span></span></a>

You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the default Foundation CSS package or that you've selected split buttons from a custom package. These should be linked up following our default HTML page structure.

Build with Mixins

We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _buttons.scss, _global.scss and _split-buttons.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/buttons";
@import "foundation/components/split-buttons";

If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:

<a href="#" class="your-class-name">Split Button Text <span></span></a>
Quick Mixin

You can quickly build an entire split buttons using our global mixin by including it on your custom class or ID in your stylesheet. The global mixin will create the necessary style for the button. The global mixin looks like this:

/* Using the default styles */
.your-class-name {
  @include button;
  @include split-button;
Default Split Button

There are also four options you can customize on the fly when writing this mixin. These control things like: padding size, pip color, border color and base styles. Setting any of these options to false will not include the styles.

/* Using the available options */
.your-class-name {
  @include button;
  @include split-button($padding, $pip-color, $span-border, $base-style);

/* This controls padding around the dropdown buttons. Use tiny, small, medium, or large */
$padding: $button-med

/* This controls the dropdown pip color. Set to one of our variables or a custom hex value */
$pip-color: $split-button-pip-color

/* This controls the border color of the triangle span area. This can be a variable or color value. */
$span-border: $primary-color

/* This controls whether or not base styles come through. Set to false to negate */
/* Handy when you want to have many different styles */
$base-style: true
Default SCSS Variables
$include-html-button-classes: $include-html-classes;

/* We use these to control different shared styles for Split Buttons */
$split-button-function-factor: 15%;
$split-button-pip-color: #fff;
$split-button-pip-color-alt: #333;
$split-button-active-bg-tint: rgba(0,0,0,0.1);

/* We use these to control tiny split buttons */
$split-button-padding-tny: $button-tny * 9;
$split-button-span-width-tny: $button-tny * 6.5;
$split-button-pip-size-tny: $button-tny;
$split-button-pip-top-tny: $button-tny * 2;
$split-button-pip-default-float-tny: em-calc(-5);

/* We use these to control small split buttons */
$split-button-padding-sml: $button-sml * 7;
$split-button-span-width-sml: $button-sml * 5;
$split-button-pip-size-sml: $button-sml;
$split-button-pip-top-sml: $button-sml * 1.5;
$split-button-pip-default-float-sml: em-calc(-9);

/* We use these to control medium split buttons */
$split-button-padding-med: $button-med * 6.4;
$split-button-span-width-med: $button-med * 4;
$split-button-pip-size-med: $button-med - em-calc(3);
$split-button-pip-top-med: $button-med * 1.5;
$split-button-pip-default-float-med: em-calc(-9);

/* We use these to control large split buttons */
$split-button-padding-lrg: $button-lrg * 6;
$split-button-span-width-lrg: $button-lrg * 3.75;
$split-button-pip-size-lrg: $button-lrg - em-calc(6);
$split-button-pip-top-lrg: $button-lrg + em-calc(5);
$split-button-pip-default-float-lrg: em-calc(-9);

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

Using the JavaScript

Before you can use split buttons you'll want to verify that both jQuery (or Zepto) and foundation.js are available on your page. You can refer to the javascript documentation on setting that up.

Just add foundation.dropdown.js AFTER the foundation.js file. Your markup should look something like this:



      document.write('<script src=/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <!-- Other JS plugins can be included here -->



Required Foundation Library: foundation.dropdown.js

Creating the Dropdown

To create a dropdown, you'll need to attach a data-attribute to whatever element you want the dropdown attached to (in this case a button). From there, you'll create a list that holds the links or content and add another data-attribute that associates with the element it belongs to. Here's an example of that markup:

<a href="#" class="button split">Dropdown Button <span data-dropdown="drop1"></span></a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
Dropdown Button

You'll notice that data-dropdown="drop1" and id="drop1" have similar values. This is what tells the dropdown plugin where to look to find the position to attach the dropdown element to.

Optional JavaScript Configuration

Dropdown button options can only be passed in during initialization at this time.

  // specify the class used for active sections
  activeClass: 'open'

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video