Dropdown buttons

Dropdown buttons are elements that, when tapped, reveal additional content. We've simplified our dropdown buttons by getting rid of the dedicated ones associated with the various buttons styles. Instead, you'll use our new dropdown plugin to attach a dropdown to the button style of your choice.


Dropdown Button

Dropdown Button

Dropdown Button

Dropdown Button

Dropdown Button


Basic

You can create a dropdown using minimal markup.

HTML

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

Advanced

Additional classes can be added to your dropdown buttons to change their appearance.

HTML

<a href="#" data-dropdown="drop" class="[tiny small medium large] [secondary alert success] [radius round] button dropdown">Dropdown Button</a><br> <ul id="drop" data-dropdown-content class="f-dropdown"> <li><a href="#">This is a link</a></li> <li><a href="#">This is another</a></li> <li><a href="#">Yet another</a></li> </ul>

Customize With Sass

Dropdown buttons can be easily customized using our provided Sass variables.

SCSS

$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 + rem-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 + rem-calc(1); // We use these to style medium dropdown buttons $dropdown-button-padding-med: $button-med * 4 + rem-calc(3); $dropdown-button-pip-size-med: $button-med - rem-calc(3); $dropdown-button-pip-opposite-med: $button-med * 2; $dropdown-button-pip-top-med: -$button-med / 2 + rem-calc(2); // We use these to style large dropdown buttons $dropdown-button-padding-lrg: $button-lrg * 4; $dropdown-button-pip-size-lrg: $button-lrg - rem-calc(6); $dropdown-button-pip-opposite-lrg: $button-lrg + rem-calc(12); $dropdown-button-pip-top-lrg: -$button-lrg / 2 + rem-calc(3);

Semantic Markup With Sass

You can create your own dropdown buttons using our Sass mixins.

Basic

You can use the dropdown-button() mixin to create your own dropdown button, like so:

SCSS

.custom-dropdown-button { @include button(); @include dropdown-button(); }

HTML

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

Advanced

You can further customize your dropdown buttons using the provided options in the dropdown-button() mixin:

SCSS

.custom-dropdown-button { @include button(); @include dropdown-button( // Determines the size of button you are working with. Default: medium. // Options [tiny, small, medium, large] $padding:medium, // Color of the little triangle that points to the dropdown. Default: #fff. $pip-color:#fff, // Add in base-styles. This can be set to false. Default:true $base-style:true ); }
Inset Shadow, Border Radius & Transition Mixin

SCSS

.custom-dropdown-button { @include button; @include dropdown-button; @include radius; @include single-transition; @include inset-shadow; }

Sass Errors?

If the default "foundation" import was commented out, then make sure you import theses files:

SCSS

@import "foundation/components/buttons"; @import "foundation/components/dropdown"; @import "foundation/components/dropdown-buttons";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »