Dropdown Buttons

We've simplified our dropdown 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.

Build With Predefined HTML Classes

There are two ways to build buttons in Foundation 4: with our predefined HTML classes or with 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.dropdown. This will create a default medium button. You can also use size, color and radius classes to control more of the style.

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 dropdown buttons from a custom package. These should be linked up following our default HTML page structure.

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:

<ahref="#"class="your-class-name">Button Text</a>

Quick Mixin

You can quickly build entire dropdown 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:

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

/* Using the available options */
.your-class-name{@includebutton;@includedropdown-button($padding,$pip-color,$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:#fff/* 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

Inset Shadow, Border Radius & Transition Mixin

Sometimes you want to add a nice fancy shine to the edge of your button. And sometimes you want to make that shine look like it gets depressed upon tap or click. We've got you covered with our quick inset shadow mixin. You can use our radius mixin to quickly apply rounded corners or a transition mixin to give the button a nice zero-fade.

Default SCSS Variables

$include-html-button-classes:$include-html-classes;/* We use these to set the color of the pip in dropdown buttons */
$dropdown-button-pip-color:#fff;$dropdown-button-pip-color-alt:#333;/* We use these to style tiny dropdown buttons */
$dropdown-button-padding-tny:$button-tny*5;$dropdown-button-pip-size-tny:$button-tny;$dropdown-button-pip-opposite-tny:$button-tny*2;$dropdown-button-pip-top-tny:-$button-tny/2+em-calc(1);/* We use these to style small dropdown buttons */
$dropdown-button-padding-sml:$button-sml*5;$dropdown-button-pip-size-sml:$button-sml;$dropdown-button-pip-opposite-sml:$button-sml*2;$dropdown-button-pip-top-sml:-$button-sml/2+em-calc(1);/* We use these to style medium dropdown buttons */
$dropdown-button-padding-med:$button-med*4+em-calc(3);$dropdown-button-pip-size-med:$button-med-em-calc(3);$dropdown-button-pip-opposite-med:$button-med*2;$dropdown-button-pip-top-med:-$button-med/2+em-calc(2);/* We use these to style large dropdown buttons */
$dropdown-button-padding-lrg:$button-lrg*4;$dropdown-button-pip-size-lrg:$button-lrg-em-calc(6);$dropdown-button-pip-opposite-lrg:$button-lrg+em-calc(12);$dropdown-button-pip-top-lrg:-$button-lrg/2+em-calc(3);

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

Using the JavaScript

You don't need ths JS to create dropdown button styles with Foundation. The only reason you'll need to include foundation.dropdown.js is if you want to add one of our dropdown to the button.

Before you can use dropdowns 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:

Creating the Dropdown

To create the 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:

<ahref="#"data-dropdown="drop1"class="button dropdown">Dropdown Button</a><br><ulid="drop1"class="f-dropdown"><li><ahref="#">This is a link</a></li><li><ahref="#">This is another</a></li><li><ahref="#">Yet another</a></li></ul>

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.