Foundation 4 Documentation

Dropdown

In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a universal dropdown plugin that will attach dropdowns or popovers next to anything!

• 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

Build With Predefined HTML Classes

To create the dropdown you'll need to attach a data-dropdown="your-id" to whatever element you want the dropdown attached to. From there you'll create a list that holds the links or content and add an id="your-id" that associates with the element it belongs to. To style the dropdown, we've included a class of .f-dropdown that you can target and style to your heart's desire. If you want the dropdown to be content, simply chain the class .content to the dropdown. Here's an example of that 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>
<ul id="drop2" class="f-dropdown content" 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>

Has Dropdown | Has Content Dropdown

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

You'll notice that data-dropdown="drop1" and id="drop1" have the same value. This is what tells the dropdown plugin where to look to find the position to attach the dropdown. It is best to place your dropdown and target element within the same offset parent.

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.

You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the default Foundation CSS package or that you've selected dropdowns from a custom package. These should be linked up following our default HTML page structure.

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>

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

Build With Our Mixins

We've included SCSS mixins used to style dropdowns. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _dropdown.scss from Github and throw them into a foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/dropdown";

If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:

<a href="#" data-dropdown="drop1">Has Dropdown</a>

<ul id="drop1" class="your-class-name" 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>

The Container Mixin

There are two mixins you can use when building your dropdowns— the container and the list style. The container mixin will give you all the styles needed for the base styles of the dropdown, not including styles for the default link list style. The container mixin looks like this:

/* Container mixin and its options */
.your-class-name { @include dropdown-container($content, $triangle, $max-width); }

/* This can be set to "list" or "content" depending on what you want inside. */
$content: list

/* If you do not want to attach the triangle pop, set this to false. */
$triangle: true

/* By default, the dropdown is 200px max-width, taking on 100% when gets smaller than that. */
/* You can set this to any number you want or change it globally with the variable. */
$max-width: $f-dropdown-max-width

The List Style Mixin

For content dropdowns, we don't add any extra style to the inside of the dropdown other than padding around the edges. For link lists, we wanted to predefined style that would look good out of the box and match the style of our custom select dropdowns. The style mixin looks like this:

/* The style mixin - It has no options other than variables to make global changes */
.your-class-name {
  @include dropdown-container($content, $triangle, $max-width);

  li { @include dropdown-style; }
}

Default SCSS Variables

$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: darken(#fff, 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: em-calc(14);
$f-dropdown-list-padding: em-calc(5 10);
$f-dropdown-line-height: em-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: em-calc(20);

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

Using the JavaScript

Just add foundation.dropdown.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

  <script>
      document.write('<script src=/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');
    </script>

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>

</body>
        

Required Foundation Library: foundation.dropdown.js

Optional JavaScript Configuration

Dropdown options can only be passed in during initialization at this time.

{
  // specify the class used for active dropdowns
  activeClass: 'open'
}