Bootstrap - Navigation Elements: Dropdowns

Dropdown menus can be used for navigation in Bootstrap. Adding the .dropdown class to a container that surrounds the buttons with the .dropdown-toggle class. You also need to use the Bootstrap JavaScript to make this work.

Listing 12.3 - A Dropdown Menu

Other dropdown classes

There are other classes that you can add to your dropdown menus:

  • .dropdown-menu-left —Forces the menu to display left aligned on the container (the default)
  • .dropdown-menu-right —Forces the menu to display right aligned on the container
  • .dropdown-header —Creates a header menu item
  • .divider —Creates a divider inside the menu
  • .disabled —Disables the menu item

A sample dropdown menu that uses .dropdown-header, .divider, and .disabled is shown here. ("Item 5" is disabled.)

Listing 12.4: A Split Button Dropdown Menu

Listing 12.5: A Simple Dropup Menu

(End of examples of Navigation element styles, Part 2.)