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

Awesome Vacations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum purus quis purus vestibulum ultrices.



Read More
Great Summer Specials

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum purus quis purus vestibulum ultrices.



Read More

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.

Features Default

Javascript Features