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

• This is a link
• This is another
• Yet another

Dropdown Button

• This is a link
• This is another
• Yet another

Dropdown Button

• This is a link
• This is another
• Yet another

Dropdown Button

• This is a link
• This is another
• Yet another

Dropdown Button

• This is a link
• This is another
• Yet another

Disabled Dropdown Button

• This is a link
• This is another
• Yet another

Basic

You can create a dropdown using minimal markup.

<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Dropdown Button</button><br>
<ul id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true">
  <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 and behavior.

<button data-dropdown="drop" aria-controls="drop" aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
<ul id="drop" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="false" tabindex="-1">
  <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>

Disabled dropdown buttons will not open when tapped:

<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="disabled button dropdown">Disabled Dropdown Button</button><br>
<ul id="drop" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="false" tabindex="-1">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">But they don't show up!</a></li>
</ul>

Accessibility

This component is not yet accessible. Stay tuned for updates in future releases.

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

<button data-dropdown="drop" aria-controls="drop" aria-expanded="true" class="custom-dropdown-button">Dropdown Button</button><br>
<ul id="drop" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="false">
  <li role="menuitem"><a href="#">This is a link</a></li>
  <li role="menuitem"><a href="#">This is another</a></li>
  <li role="menuitem"><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";