Dropdown Buttons

Dropdown buttons are elements that, when tapped, reveal additional content.

.button.dropdown

Basic

You can create a dropdown with minimal markup.

<a href="#" data-dropdown="drop-default" class="button dropdown">Dropdown Button</a><br>
<ul id="drop-default" data-dropdown-content class="f-dropdown">
<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>
Dropdown Button

Class Options

Additional classes can be added to your dropdown buttons to change their appearance. All the classes that are available to buttons are available here.

Different sizes:

<a href="#" data-dropdown="drop-tiny" class="button dropdown tiny">.tiny.dropdown.button</a><br>
<ul id="drop-tiny" data-dropdown-content class="f-dropdown">
<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>
.tiny.dropdown.button 
<a href="#" data-dropdown="drop-small" class="button dropdown small">.small.dropdown.button</a><br>
<ul id="drop-small" data-dropdown-content class="f-dropdown">
<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>
.small.dropdown.button 
<a href="#" data-dropdown="drop-large" class="button dropdown large">.large.dropdown.button</a><br>
<ul id="drop-large" data-dropdown-content class="f-dropdown">
<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>
.large.dropdown.button

Colors:

<a href="#" data-dropdown="drop-secondary" class="button dropdown secondary">.secondary.dropdown.button</a><br>
<ul id="drop-secondary" data-dropdown-content class="f-dropdown">
<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>
.secondary.dropdown.button 
<a href="#" data-dropdown="drop-transparent" class="button dropdown transparent">.transparent.dropdown.button</a><br>
<ul id="drop-transparent" data-dropdown-content class="f-dropdown">
<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>
.transparent.dropdown.button