Dropdowns

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

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

<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Has Dropdown</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" 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>
<a data-dropdown="drop2" aria-controls="drop2" aria-expanded="false">Has Content Dropdown</a>
<div id="drop2" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
  <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

Dropdown Classes

<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>

Directions

<a href="#" data-options="align:left" data-dropdown="drop" class="button">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>

When the dropdown does not fit in the container, it will automatically be changed to align: bottom. If this is not the desired behavior, you can override this by specifying the ignore_repositioning property in the data-options.

Autoclose

There is an autoclose option that you can include in the mark up. This is an option that enables the dropdown to close automatically when a link is clicked within the dropdown.

This option is enabled by default, but to disable (keep dropdowns persisting), set the attribute aria-autoclose to false.

  <a class="button" data-dropdown="autoCloseExample" aria-controls="autoCloseExample" aria-expanded="false">Link Dropdown &raquo;</a>
  <ul id="autoCloseExample" class="f-dropdown" data-dropdown-content tabindex="-1" aria-hidden="true" aria-autoclose="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>

Hoverable Dropdown

If you'd rather have your dropdown be accessible by hover, you can add a data-option to the target element. There is also an optional setting hover_timeout that you can set to a time (in milliseconds) that will set your own custom delay to the element. The default setting for hover_timeout is 150ms.

<a href="#" data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000">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>

Accessibility

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

Customize with Sass

Dropdowns can be easily customized using our Sass variables.

SCSS

$include-html-dropdown-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;

// Used for bottom position
$f-dropdown-margin-top: 2px;

// Used for right position
$f-dropdown-margin-left: $f-dropdown-margin-top;

// Used for left position
$f-dropdown-margin-right: $f-dropdown-margin-top;

// Used for top position
$f-dropdown-margin-bottom: $f-dropdown-margin-top;

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

// 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($white, $lightness: -20%);

// We use these to style the triangle pip.
$f-dropdown-triangle-size: 6px;
$f-dropdown-triangle-color: $white;
$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: $charcoal;
$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: $smoke;
$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/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>

Optional Javascript Configuration

JS

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

Adding New Dropdown Content After Page Load

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('dropdown', 'reflow');

Sass Errors?

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

SCSS

@import "foundation/components/dropdown";