title: Dropdown description: Dropdown panes are little happy sprites which can be revealed on click or hover. sass: scss/components/_dropdown.scss js: js/foundation.dropdown.js video: '0F68zptD_nQ'

Basics

To create a dropdown pane, add the class .dropdown-pane and the attribute data-dropdown to an element. Give the dropdown a unique ID as well.

To create the dropdown trigger, add data-toggle to a <button>. The value of data-toggle is the ID of the dropdown.

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
  Example form in a dropdown.
  <form>
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6">
          <label>Name
            <input type="text" placeholder="Kirk, James T.">
          </label>
        </div>
        <div class="cell medium-6">
          <label>Rank
            <input type="text" placeholder="Captain">
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
  Just some junk that needs to be said. Or not. Your choice.
</div>

Positioning

By default, a dropdown anchors below the button that opened it. Add the class .top, .right, or .bottom to the dropdown to change this.

<button class="button" type="button" data-toggle="example-dropdown2">Top Aligned</button>

<div class="dropdown-pane top" id="example-dropdown2" data-dropdown>
  Just some junk that needs to be said. Or not. Your choice.
</div>

Left Aligned

Right Aligned

Adding .float-right or .float-left to the anchor will change the direction of the dropdown as well.

Bottom-right Aligned

Bottom-left Aligned

Explicit Positioning

Wouldn't it be great if you can define both positions at the dropdown element. Dropdown has a fully explicit positioning model through which you can use both data-position and data-alignment to define both positions of the box.

These dropdowns test various positioning and alignments. Valid positions are left/right/top/bottom. Valid alignments are left/right/top/bottom/center. Left align means left sides should line up. Right align means right sides should line up. Center align means centers should line up.

Top and Bottom positioned

<!-- Bottom Left -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Bottom Center -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Bottom Right -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Left -->
<button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Center -->
<button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Right -->
<button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

Left and Right Positioned

<!-- Right Top -->
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
</div>

<!-- Left Top -->
<button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
</div>

<!-- Right Center -->
<button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
</div>

<!-- Left Center -->
<button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
</div>

<!-- Right Bottom -->
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
</div>

<!-- Left Bottom -->
<button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
</div>

Foundation Laravel Package