Dropdowns

Top Left

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default   <span class="fa fa-caret-up"></span></button>
  <ul class="dropdown-menu top-left">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Bottom Left

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu bottom-left">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Right Top

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default   <span class="fa fa-caret-right"></span></button>
  <ul class="dropdown-menu right-top">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Left Top

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-left"></span>   Default</button>
  <ul class="dropdown-menu left-top">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Top Right

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default   <span class="fa fa-caret-up"></span></button>
  <ul class="dropdown-menu top-right">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Bottom Right

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu bottom-right">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Right Bottom

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default   <span class="fa fa-caret-right"></span></button>
  <ul class="dropdown-menu right-bottom">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Left Bottom

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><span class="fa fa-caret-left"></span>   Default</button>
  <ul class="dropdown-menu left-bottom">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Headers

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">HEADER FIRST</li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="dropdown-header">HEADER SECOND</li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

Divider

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Icons Menu Items

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="fa fa-star-o"></span>  Action</a></li>
    <li><a href="#"><span class="fa fa-pencil"></span>  Another action</a></li>
    <li><a href="#"><span class="fa fa-trash-o"></span>  Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="fa fa-cog"></span>  Separated link</a></li>
  </ul>
</div>

Badages In Menu Items

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action <span class="badge bg-warning">6</span></a></li>
    <li><a href="#">Another action <span class="badge bg-success">12</span></a></li>
    <li><a href="#">Something else here <span class="badge bg-danger">8</span></a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link <span class="badge bg-info">22</span></a></li>
  </ul>
</div>

Bullet

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu dropdown-bullet">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Default

<ul class="dropdown-menu dropdown-demo">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu"> <a href="#" >Separated link<span class="ico-right fa fa-caret-right"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li class="dropdown-submenu"> <a href="#" >Second level link<span class="ico-right fa fa-caret-right"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Second level link</a></li>
            <li><a href="#">Second level link</a></li>
            <li><a href="#">Second level link</a></li>
            <li><a href="#">Second level link</a></li>
            <li><a href="#">Second level link</a></li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

Dropup

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu ">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu"> <a href="#">Separated link<span class="ico-right fa fa-caret-right"></span></a>
      <ul class="dropdown-menu right-bottom" role="menu">
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
      </ul>
    </li>
  </ul>
</div>

Left Submenu

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu"> <a href="#" role="button" tabindex="-1" >More options <span class="ico-right fa fa-caret-left"></span></a>
      <ul class="dropdown-menu left-top" role="menu">
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
        <li><a href="#">Second level link</a></li>
      </ul>
    </li>
  </ul>
</div>

Click

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu ">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Hover

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu dropdown-bullet">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Animation

<div class="btn-group">
  <button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu animate">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Split Button Dropdowns

<div class="btn-group">
  <button class="btn bg-accent" type="button">Action</button>
  <button data-toggle="dropdown" class="btn dropdown-toggle  bg-accent"><span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>