biofriction-wp-theme/node_modules/foundation-sites/docs/pages/dropdown.md

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

You might be looking for dropdown menus, which are a separate plugin.

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.

Watch this part in video

<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

Just some junk that needs to be said. Or not. Your choice.

Right Aligned

Just some junk that needs to be said. Or not. Your choice.

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

Bottom-right Aligned

Just some junk that needs to be said. Or not. Your choice.

Bottom-left Aligned

Just some junk that needs to be said. Or not. Your choice.

---

Explicit Positioning

New in v6.4: Heads up! This explicit positioning model is a new feature in v6.4.

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>

Bottom Left

Toggle Dropdown

This dropdown has position bottom and alignment left should align with its top left corner at the bottom left of the button

Bottom Center

Toggle Dropdown

This dropdown has position bottom and alignment center should align below the button with its center aligned with the center of the button

Bottom Right

Toggle Dropdown

This dropdown has position bottom and alignment right should align with its top right corner at the bottom right of the button

Top Left

Toggle Dropdown

This dropdown has position top and alignment left should align with its bottom left corner at the top left of the button

Top Center

Toggle Dropdown

This dropdown has position top and alignment center should align above with its center aligned with the center of the button

Top Right

Toggle Dropdown

This dropdown has position top and alignment right should align with its bottom right corner at the top right of the button

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>

Right Top

Toggle Dropdown

This dropdown has position right and alignment top should align with its top left corner at the top right of the button

Left Top

Toggle Dropdown

This dropdown has position left and alignment top should align with its top right corner at the top left of the button

Right Center

Toggle Dropdown

This dropdown has position right and alignment center should align to the right of the button with the center of the dropdown vertically aligned with the center of the button

Left Center

Toggle Dropdown

This dropdown has position left and alignment center should align to the left of the button with the center of the dropdown vertically aligned with the center of the button

Right Bottom

Toggle Dropdown

This dropdown has position right and alignment bottom should align with its bottom left corner at the bottom right of the button

Left Bottom

Toggle Dropdown

This dropdown has position left and alignment bottom should align with its bottom right corner at the bottom left of the button