Dropdown

Toggle contextual overlays for displaying lists of links and actions.

Basic Dropdown

Action Another action Something else
Separated link 
<div class="ui-dropdown">
  <button class="ui-btn" data-ui-toggle="dropdown">Dropdown</button>
  <div class="ui-dropdown__menu">
    <a href="#" class="ui-dropdown__item">Action</a>
    <a href="#" class="ui-dropdown__item">Another action</a>
    <div class="ui-dropdown__divider"></div>
    <a href="#" class="ui-dropdown__item">Separated link</a>
  </div>
</div>

Dropdown Variants

Action Another
Action Another
Action Another

Menu Alignment

Menu aligned left
Menu aligned right

With Headers

Dropdown Header
Action Another action

Events

EventDescription
ui:dropdown:showFired before showing (cancelable)
ui:dropdown:shownFired after shown
ui:dropdown:hideFired before hiding (cancelable)
ui:dropdown:hiddenFired after hidden