4 ways to use Bootstrap dropdown in menu

4 ways to use Bootstrap dropdown in menu

Bootstrap dropdown

The Bootstrap dropdown plugin allows you adding the dropdown menu in the tabs, buttons, and navigation bars. In order to use the dropdown plugin, you have to include dropdown.js, if you need to use only this component of Bootstrap in your project.

Otherwise, after including the bootstrap.min.js or bootstrap. js, the dropdown plugin can be included into your web documents and you do not need to include plugin file separately.

Note: If you are looking for the dropdown in forms (Bootstrap select) then go to its own chapter.

Following are a few examples of creating the dropdown menus in different sections or elements.

Example of Bootstrap dropdown in navigation bar

The following example shows how to add a dropdown in the top navigation bar. We will use dropdown-menu class in the unordered list element to create a dropdown for “products” within the navigation bar. The <li> will act as menu items of the dropdown. To add separators in the dropdown, simply assign divider class to <li> with no text.

Bootstrap dropdown navigation

Experience this online

Button dropdown example

You can also create button dropdown quite easily by using wrapping button in btn-group class. The dropdown items are created by using unordered list <ul> along with <li> tags. See the example with code to learn how to create a single dropdown button for different button types including default, success and danger button classes.

Bootstrap dropdown

Experience this online

A Split button dropdown example

The split button style is the one with a separator in the button with an arrow. You can create the split button dropdown with a separate button. See the following example of a split button.

Bootstrap dropdown split

Experience this online

Button dropdown with different sizes example

You may choose different classes of buttons for various dropdown button sizes. You can choose from btnlg, btn-sm and btn-xs for large, small and extra small dropdown button size, respectively. See the following example for all sizes.

Experience this online

Useful Reading: Twitter Bootstrap Tutorial | Bootstrap Table | Bootstrap CSS | Bootstrap Form