Dropdowns

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

Normal

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

Primary

  <div class="btn-group">
    <button class="btn bg-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret ml-5"></span></button>
    <ul class="dropdown-menu hover-primary">
      <li><a href="#">Action</a></li>
      <li class="active bg-primary"><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

Success

  <div class="btn-group">
    <button class="btn bg-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret ml-5"></span></button>
    <ul class="dropdown-menu hover-success">
      <li><a href="#">Action</a></li>
      <li class="active  bg-success"><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

Info

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

Warning

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

Danger

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

Dark

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

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-up"></span></button>
  <ul class="dropdown-menu top-center  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>

Bottom Center

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu bottom-center  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>

Right Center

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-right"></span></button>
  <ul class="dropdown-menu right-center  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>

Left Center

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover"><span class="fa fa-caret-left"></span>   Default</button>
  <ul class="dropdown-menu left-center  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>

Top Left

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-up"></span></button>
  <ul class="dropdown-menu top-left  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>

Bottom Left

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu bottom-left  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>

Right Top

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-right"></span></button>
  <ul class="dropdown-menu right-top  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>

Left Top

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover"><span class="fa fa-caret-left"></span>   Default</button>
  <ul class="dropdown-menu left-top  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>

Top Right

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-up"></span></button>
  <ul class="dropdown-menu top-right  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>

Bottom Right

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover">Default   <span class="fa fa-caret-down"></span></button>
  <ul class="dropdown-menu bottom-right  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>

Right Bottom

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover" aria-expanded="false">Default   <span class="fa fa-caret-right"></span></button>
  <ul class="dropdown-menu right-bottom  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>

Left Bottom

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-event="hover"><span class="fa fa-caret-left"></span>   Default</button>
  <ul class="dropdown-menu left-bottom  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>

<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

<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" 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>
</div>

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 class="btn dropdown-toggle  bg-accent" data-toggle="dropdown"><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>