Anniversary Button Drop Down Menus

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

The color of the button is determined by the btn-default (see below), substitute with btn-success (green), btn-danger (red), btn-info (pale blue), btn-primary (dark blue) or btn-warning (orange).

    <div class="btn-group">
      <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></div>
      <ul class="dropdown-menu" role="menu">
        <li>[[Action]]</li>
        <li>[[Another action]]</li>
        <li>[[Something else here]]</li>
        <li class="divider"></li>
        <li>[[Separated link]]</li>
      </ul>
    </div>

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Default

Primary

Success

Info

Warning

Danger

    <div class="btn-group">
      <div class="btn btn-default">Default</div>
      <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
      </div>
      <ul class="dropdown-menu" role="menu">
        <li>[[Action]]</li>
        <li>[[Another action]]</li>
        <li>[[Something else here]]</li>
        <li class="divider"></li>
        <li>[[Separated link]]</li>
      </ul>
    </div>

Sizing

Button dropdowns work with buttons of all sizes.

The size of the button is determined by the btn-lg (see below), substitute with btn-sm (small), btn-xs (extra small) or remove the size class to display the default size.

   <div class="btn-group">
        <div class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Large button <span class="caret"></span>
        </div>
        <ul class="dropdown-menu" role="menu">
        <li>[[Action]]</li>
        <li>[[Another action]]</li>
        <li>[[Something else here]]</li>
        <li class="divider"></li>
        <li>[[Separated link]]</li>
        </ul>
      </div>

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.

<div class="btn-group dropup">
        <div class="btn btn-default">Dropup</div>
        <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
        </div>
        <ul class="dropdown-menu" role="menu">
        <li>[[Action]]</li>
        <li>[[Another action]]</li>
        <li>[[Something else here]]</li>
        <li class="divider"></li>
        <li>[[Separated link]]</li>
        </ul>
      </div>