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!

Link Dropdown » Content Dropdown »

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 hearts desire. If you want the dropdown to be content, simply chain the class .content to the dropdown.

Has Dropdown | Has Content Dropdown

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

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

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.