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

    • 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

    • Header

  • Dropdown header
  • Action
  • Another action

    • Divider

  • Action
  • Another action
  • Something else here
  • Separated link

    • Disabled

  • Regular link
  • Disabled link
  • Another link

    • 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

    • Multi-level

  • First action
  • Third action

    • 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
    • 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