Dropdowns

Contents

Default

Dropdown menus include a top caret by default, but can be removed by removing the .no-caret class.

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger <i class="caret"></i></a>
  <ul class="dropdown-menu [modifier class]" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Link one</a></li>
    <li class="active"><a href="#">Link two (active)</a></li>
    <li><a href="#">Link three</a></li>
    <li class="divider"></li>
    <li><a href="#">Link four</a></li>
    <li class="disabled"><a href="#">Link five (disabled)</a></li>
  </ul>
</div><!--/dropdown-->

With Sub-menu

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger <i class="caret"></i></a>
  <ul class="dropdown-menu [modifier class]" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Link one</a></li>
    <li class="dropdown-submenu">
      <a href="#">Link two w/ sub-menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">sub-link one</a></li>
        <li><a href="#">sub-link two</a></li>
        <li><a href="#">sub-link three</a></li>
      </ul>
    </li>
    <li><a href="#">Link three</a></li>
  </ul>
</div><!--/dropdown-->

Dropup

Dropdown that needs to go up directionally rather than down.

<div class="dropdown dropup">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup trigger <i class="caret"></i></a>
  <ul class="dropdown-menu [modifier class]" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Link one</a></li>
    <li class="active"><a href="#">Link two (active)</a></li>
    <li><a href="#">Link three</a></li>
    <li class="divider"></li>
    <li><a href="#">Link four</a></li>
    <li class="disabled"><a href="#">Link five (disabled)</a></li>
  </ul>
</div><!--/dropdown-->

Chosen dropdown

Markup is generated by the chosen javascript plugin. Also see Plugins section.

  • One
  • Two (hover state)
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten
  • Eleven
  • Twelve
<div class="chzn-container chzn-container-single">
  <a href="javascript:void(0)" class="chzn-default" tabindex="-1"></a>
  <div class="chzn-drop" style="display: block; width: 218px; top: 0;">
    <div class="chzn-search">
      <input type="text" autocomplete="off" style="width: 183px;">
    </div><!--/chzn-search-->
    <ul class="chzn-results">
      <li class="active-result">One</li>
      <li class="active-result highlighted">Two (hover state)</li>
      <li class="active-result">Three</li>
      <li class="active-result">Four</li>
      <li class="active-result">Five</li>
      <li class="active-result">Six</li>
      <li class="active-result">Seven</li>
      <li class="active-result">Eight</li>
      <li class="active-result">Nine</li>
      <li class="active-result">Ten</li>
      <li class="active-result">Eleven</li>
      <li class="active-result">Twelve</li>
    </ul>
  </div><!--/chzn-drop-->
</div><!--/chzn-container-->