DropDown Component

Dropdown panes are little happy sprites which can be revealed on click or hover.

Basics

A simple dropdown needs to have just a text="" attribute and your content:

<dropdown text="DropDown">
Wow awesome I am droping like its hot!
</dropdown>

You can put into your dropdown what ever you want. Heres an example of a dropdown containing a form:

<dropdown text="A dropdown - form example" data-auto-focus="true">
  Example form in a dropdown.
  <form>
    <div class="row">
      <div class="medium-6 columns">
        <label>Name
          <input type="text" placeholder="Kirk, James T.">
        </label>
      </div>
      <div class="medium-6 columns">
        <label>Rank
          <input type="text" placeholder="Captain">
        </label>
      </div>
    </div>
  </form>
</dropdown>

Autofocus

May you have noticed that I am using the data-auto-focus="true" within my form example. Well this allows to use autofocus within your dropdown, which is pretty damn cool.

Positioning

By default, a dropdown anchors below the button that opened it. Add the position="" attribute to the dropdown to change this behaviour:

<dropdown text="Top DropDown" position="top">I am on the top!</dropdown>
<dropdown text="Right DropDown" position="right">I am on the right!</dropdown>
<dropdown text="Left DropDown" position="left">I am on the left!</dropdown>