Dropdown

We removed the various dropdowns within different UI elements for Foundation 5. Instead, we created a universal dropdown plugin that will attach dropdowns or popovers to whatever element you need.

Link Dropdown »

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

Content Dropdown »

Title

Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

More test.

Button

Basic

You can create a dropdown using minimal markup.

<a href="#" data-dropdown="drop1">Has Dropdown</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>
</ul>
<a href="#" data-dropdown="drop2">Has Content Dropdown</a>
<div id="drop2" data-dropdown-content class="f-dropdown content">
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>

Advanced

Additional classes can be added to your dropdown to change its appearance.

<a href="#" class="button" data-dropdown="drop">Link Dropdown &raquo;</a>
<ul id="drop" class="[tiny small medium large content]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>
</ul>

Available class options:

• tiny: Make the dropdown have a max-width of 200px
• small: Make the dropdown have a max-width of 300px
• medium: Make the dropdown have a max-width of 500px
• large: Make the dropdown have a max-width of 800px
• content: Add padding inside the dropdown for better-looking content

Hoverable Dropdown Option

If you'd rather have your dropdown be accessible by hover, you can add a data-option to the target element:

<a href="#" data-dropdown="hover1" data-options="is_hover:true">Has Hover Dropdown</a>

<ul id="hover1" 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>
</ul>

Customize With Sass

Dropdowns can be easily customized using our Sass variables.

SCSS

$include-html-button-classes: $include-html-classes;

/* We use these to controls height and width styles. */
$f-dropdown-max-width: 200px;
$f-dropdown-height: auto;
$f-dropdown-max-height: none;
$f-dropdown-margin-top: 2px;

/* We use this to control the background color */
$f-dropdown-bg: #fff;

/* We use this to set the border styles for dropdowns. */
$f-dropdown-border-style: solid;
$f-dropdown-border-width: 1px;
$f-dropdown-border-color: scale-color(#fff, $lightness: -20%);

/* We use these to style the triangle pip. */
$f-dropdown-triangle-size: 6px;
$f-dropdown-triangle-color: #fff;
$f-dropdown-triangle-side-offset: 10px;

/* We use these to control styles for the list elements. */
$f-dropdown-list-style: none;
$f-dropdown-font-color: #555;
$f-dropdown-font-size: rem-calc(14);
$f-dropdown-list-padding: rem-calc(5 10);
$f-dropdown-line-height: rem-calc(18);
$f-dropdown-list-hover-bg: #eeeeee;
$dropdown-mobile-default-float: 0;

/* We use this to control the styles for when the dropdown has custom content. */
$f-dropdown-content-padding: rem-calc(20);

Semantic Markup With Sass

You can create your own dropdowns using our Sass mixins.

Basic

You can use the dropdown-container() and dropdown-style() mixins to create your own dropdowns, like so:

The Container Mixin

SCSS

.custom-dropdown-container-class {
  @include dropdown-container();
}

The List Style Mixin

SCSS

.custom-dropdown-container-class {
  @include dropdown-container();

  li { @include dropdown-style; }
}

Advanced

You can further customize your dropdowns with the options in the dropdown-container() mixin:

SCSS

.custom-dropdown-container-class {
  @include dropdown-container(
    // Sets list-style. Default: list. Options: [list, content]
    $content:list,
    // Sets if dropdown has triangle. Default:true.
    $triangle:true,
    // Sets max-width. Default: $f-dropdown-max-width
    $max-width
  );

  li { @include dropdown-style; }
}

Configure With JavaScript

It's easy to configure dropdowns using our provided JavaScript. You can use data-attributes or plain old JavaScript. Make sure jquery.js foundation.js and foundation.dropdown.js have been included on your page before continuing. For example, add the following before the closing <body> tag:

<script src="js/jquery.js"></script>
<script src="js/foundation.js"></script>
<script src="js/foundation.dropdown.js"></script>

Optional Javascript Configuration

JS

$(document).foundation({
  // specify the class used for active dropdowns
  active_class: 'open'
});

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/dropdown";