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!

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-dropdownthat you can target and style to your hearts desire. If you want the dropdown to be content, simply chain the class .contentto the dropdown.

Has Dropdown| Has Content 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

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