Dropdown Menus

Dropdowns can be used for space-saving in-page navigation.

Dropdown Example  Code

A second example can be seen above this page's page title, to the right. This example shows how a dropdown can be used as secondary navigation.

Options

  • Drop Up

    Switch the drop down to a drop up by adding the .dropup class to <div class="dropdown dropup">.

  • Menu Alignment

    Align the drop down to the right by adding the .dropdown-menu-right class to <ul class="dropdown-menu dropdown-menu-right">.

  • Menu Separators

    Add a separator to the dropdown menu by adding <li role="separator" class="divider"></li>.

  • Menu Headers

    Add a heading to the dropdown menu by adding <li class="dropdown-header">Dropdown header</li>.