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.



Basic

You can create a dropdown using minimal markup. On a small device, the tooltips are full-width and bottom aligned.

HTML

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

HTML Rendered

Has Dropdown | Has Content Dropdown

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


Advanced

Dropdown Classes

Additional classes can be added to your dropdown to change its appearance. 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 mega: Make the dropdown go full 100% width content: Add padding inside the dropdown for better-looking content

HTML

<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

You can now position dropdowns on the top, bottom, left, or right of the target element. The default position is bottom and you do not need to change anything to get your tooltip positioned bottom. To set other alignments, just specify the align property in data-options on the target element.
<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.

HTML

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




Building Blocks Using Dropdowns


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

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