Elements

Dropdowns

Dropdowns are a creative way to provide more options on a click or hover element. With Uikit dropdown component, you can attach the dropdown to couple of elements to enrich your UI composition.

Button with dropdowns

To create a button dropdown, wrap the uk-button-dropdown class around a button that you'd like to add a dropdown menu, then add the dropdowm markup right after the button. Additionally, you can add an arrow icon using the [icon] shortcode to depict a dropdown menu.

<div class="uk-button-dropdown" data-uk-dropdown>
  <a class="uk-button-default uk-button" href="#" target="_self">Dropdown 1 <i class="uk-icon-angle-down"></i></a>
  <div class="uk-dropdown">
    <ul class="uk-nav uk-nav-dropdown"><p></p>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
      <li class="uk-nav-header uk-navbar-nav-subtitle">Menu Heading
        <div>Subtitle possible</div>
      </li>
      <li><a href="#"><i class="uk-icon-envelope-o"></i> Menu Icon</a></li>
      <li><a href="#"><i class="uk-icon-heart-o"></i> Another Menu item</a></li>
      <li class="uk-nav-divider"></li>
      <li><a href="#">Separated item</a></li>
    </ul>
  </div>
</div>

Button group with dropdowns

You can also use button groups to split buttons into a standard action on the left and a dropdown toggle on the right.

<div class="uk-button-group">
  <a class="uk-button-success uk-button" href="#" target="_self">Button</a>
  <div class="" data-uk-dropdown>
    <a class="uk-button-success uk-button" href="#" target="_self"><i class="uk-icon-caret-down"></i></a>
    <div class="uk-dropdown">
      <ul class="uk-nav uk-nav-dropdown"><p></p>
        dropdown items go here
      </ul>
    </div>
  </div>
</div>

The following is a list of possible class options that can be used in conjunction with the uk-dropdown class

style	Description
uk-color	Use the main menu color in the dropdown menu
uk-dropdown-flip	Aligns the dropdown menu to the right
uk-dropdown-up	Aligns the dropdown menu above the toggle
uk-dropdown-center	Centers the dropdown menu.
uk-dropdown-small	Set the dropdown to be smaller

<div class="uk-button-group">
  <a class="uk-button-success uk-button" href="#" target="_self">Button</a>
  <div class="" data-uk-dropdown>
    <a class="uk-button-success uk-button" href="#" target="_self"><i class="uk-icon-caret-down"></i></a>
    <div class="uk-dropdown uk-color uk-dropdown-up uk-dropdown-center uk-dropdown-small">
      <ul class="uk-nav uk-nav-dropdown"><p></p>
        dropdown items go here
      </ul>
    </div>
  </div>
</div>