Dropdown

Basic

The dropdown’s trigger and the dropdown menu must be wrapped within .dropdown, or another element that declares position: relative;.
  • Action
  • Another action
  • Something else here
    • <div class="dropdown open">
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </div>
</div>
        Copy
  • Action
  • Another action
  • Something else here
    • <div class="dropup">
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </div>
</div>
        Copy

    Right-aligned

    To create a right-aligned dropdown menu, add the .dropdown-menu-right class to the .dropdown-menu.

    <div class="dropdown-menu dropdown-menu-right">
  ...
</div>

    Active

  • Action
  • Another action
  • Something else here
    • <div 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>
</div>
        Copy

    Header

  • Dropdown header
  • Action
  • Another action
    • <div class="dropdown-menu">
  <li class="dropdown-header">Dropdown header</li>
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
</div>
        Copy

    Divider

  • Action
  • Another action
  • Something else here
  • Separated link
    • <div 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>
</div>
        Copy

    Disabled

  • Regular link
  • Disabled link
  • Another link
    • <div class="dropdown-menu">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</div>
        Copy

    With label

    A dropdown menu item can contain a label, just place the .label within the dropdown menu item.

  • 12 Label
  • New Tag
  • 24 Pill 
    • <div class="dropdown-menu">
  <li>
    <a href="#">
      <span class="label label-info pull-right">12</span>
      Label
    </a>
  </li>
  <li>
    <a href="#">
      <span class="label label-tag label-success pull-right">New</span>
      Tag
    </a>
  </li>
  <li>
    <a href="#">
      <span class="label label-pill label-danger pull-right">24</span>
      Pill
    </a>
  </li>
</div>
        Copy

    Multi-level

  • First action
  • Third action
    • <div class="dropdown">
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Multi-level dropdown
  </button>
  <div class="dropdown-menu">
    <li><a href="#">First action</a></li>

    <li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <a href="#">Second action</a>
      <ul class="dropdown-menu">
        <li><a href="#">First action</a></li>
        <li><a href="#">Second action</a></li>

        <li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
          <a href="#">Third action</a>
          <ul class="dropdown-menu">
            <li><a href="#">First action</a></li>
            <li><a href="#">Second action</a></li>
          </ul>
        </li>

      </ul>
    </li>

    <li><a href="#">Third action</a></li>

    <li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <a href="#">Fourth action</a>
      <ul class="dropdown-menu">
        <li><a href="#">First action</a></li>
        <li><a href="#">Second action</a></li>
      </ul>
    </li>
  </div>
</div>
        Copy

    Multi-column

    Use the .col-sm-*, .col-md-* and .col-lg-* classes to specify breakpoints.

  • Business
  • Design & Urban Ecologies
  • Fine Art
  • Fashion Design
  • Strategic Design
  • Liberal Arts
  • Anthropology
  • Media Studies
  • Philosophy
  • Social Sciences
  • Food Studies
  • Journalism
  • Non Profit Management
    • <div class="dropdown open">
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Multi-column dropdown
  </button>
  <div class="dropdown-multi-column">
    <div class="dropdown-menu dropdown-column col-md-4">
      <li class="dropdown-header">Business</li>
      <li><a href="#">Design &amp; Urban Ecologies</a></li>
      <li><a href="#">Fine Art</a></li>
      <li><a href="#">Fashion Design</a></li>
      <li><a href="#">Strategic Design</a></li>
    </div>
    <div class="dropdown-menu dropdown-column col-md-4">
      <li class="dropdown-header">Liberal Arts</li>
      <li><a href="#">Anthropology</a></li>
      <li><a href="#">Media Studies</a></li>
      <li><a href="#">Philosophy</a></li>
    </div>
    <div class="dropdown-menu dropdown-column col-md-4">
      <li class="dropdown-header">Social Sciences</li>
      <li><a href="#">Food Studies</a></li>
      <li><a href="#">Journalism</a></li>
      <li><a href="#">Non Profit Management</a></li>
    </div>
  </div>
</div>
        Copy
    See the usage documentation at http://getbootstrap.com/javascript/#dropdowns

    Usage

    To use dropdowns, you need to require the dropdown plugin:

    require(['px-bootstrap/dropdown']);
    See the documentation at https://angular-ui.github.io/bootstrap

    Usage

    To use dropdowns, you need to include ui-bootstrap.js script:

    <script src="path/to/js/ui-bootstrap.js"></script>

    Example

     
  • First action
  • Third action
    • <div ng-app="ngDropdownsApp">
  <div uib-dropdown>
    <button type="button" class="btn" uib-dropdown-toggle>Dropdown</button>
    <ul uib-dropdown-menu>
      <li><a href><span class="label label-success pull-right">34</span>Action</a></li>
      <li><a href><span class="badge badge-info pull-right">16</span>Another action</a></li>
      <li><a href>Something else here</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Dropdown header</li>
      <li><a href><i class="fa fa-cloud"></i>&nbsp;&nbsp;With icon</a></li>
      <li><a href>Last action</a></li>
    </ul>
  </div>

  &nbsp;

  <div uib-dropdown>
    <button type="button" class="btn" uib-dropdown-toggle>Multi-level</button>
    <div uib-dropdown-menu>
      <li><a href>First action</a></li>

      <li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <a href>Second action</a>
        <ul class="dropdown-menu">
          <li><a href>First action</a></li>
          <li><a href>Second action</a></li>

          <li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            <a href>Third action</a>
            <ul class="dropdown-menu">
              <li><a href>First action</a></li>
              <li><a href>Second action</a></li>
            </ul>
          </li>

        </ul>
      </li>

      <li><a href>Third action</a></li>

      <li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <a href>Fourth action</a>
        <ul class="dropdown-menu">
          <li><a href>First action</a></li>
          <li><a href>Second action</a></li>
        </ul>
      </li>
    </div>
  </div>
</div>

<script>
  angular.module('ngDropdownsApp', [ 'ui.bootstrap' ]);
</script>
        Copy
    SETTINGS
    THEMES