Added the following improvements:

• Support for radio and checkboxes
• Positioning of menus
• Bullet for menus

To start using the improvements you need to include a modified dropdown.js and dropdown.css file.

For more information, see the examples below.

Looking for Bootstrap v3?

Default

The only thing that is required for proper operation, is to comply with certain markup conditions. Input elements should be located outside of the label and label must have a correct for attribute.

<div class="btn-group">
  <button data-toggle="dropdown" class="btn dropdown-toggle">Checked option <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID">Label</label></li>
      <!-- Other items -->
    </ul>
</div> 
          

No Close

Do not close the menu on click on radio add class .noclose.

<div class="btn-group">
  <button data-toggle="dropdown" class="btn dropdown-toggle">Checked option <span class="caret"></span></button>
    <ul class="dropdown-menu noclose">
      <li><input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID">Label</label></li>
      <!-- Other items -->
    </ul>
</div>
          

Custom placeholder

Use html5 attribute data-placeholder to specify a default label. Uncheck checkbox in example bellow to see effect.

<div class="btn-group">
  <button data-toggle="dropdown" class="btn dropdown-toggle"  data-placeholder="Please select">Checked option <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><input type="checkbox" id="ID"><label for="ID" name="NAME" value="VALUE">Label</label></li>
      <!-- Other items -->
    </ul>
</div> 
          

Label placement

Using html5 attribute data-label-placement you can specify the container for label. See examples below.

<div class="btn-group">
  <button class="btn btn-primary" data-label-placement>Checked option</button>
  <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><input type="checkbox" id="ID" name="NAME" value="VALUE"><label for="ID">Label</label></li>
      <!-- Other items -->
    </ul>
</div>
          

Disable label replacement

Set data-placeholder="false" to disable label replacement. See examples below.

<div class="btn-group">
  <button class="btn btn-primary">Checked option</button>
  <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" data-placeholder="false"><span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><input type="checkbox" id="ID" name="NAME" value="VALUE"><label for="ID">Label</label></li>
      <!-- Other items -->
    </ul>
</div>
          

Custom label text

Add class .data-label to desired element.

<div class="btn-group">
  <button data-toggle="dropdown" class="btn dropdown-toggle">Checked option <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"><span class="data-label">Label</span> Other text</label></li>
      <!-- Other items -->
    </ul>
</div>
          

Usage

Use extra classes for advanced positioning of dropdown menus. Classes: .pull-top, .pull-right

Centered

This classes use a small piece of javascript for correct positioning. Classes: .pull-center, .pull-middle

Usage

To add bullet just add class .bullet to the dropdown menu, .pull-right

Centered