Skip to content
4 ways to use Bootstrap dropdown in menu
In This Tutorial
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.
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.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>dropdown example</h1>
<nav role=“navigation”>
<div class=“container-fluid”>
<!– Navigation bar –>
<div class=“collapse navbar-collapse” id=“bs-example-navbar-collapse-1”>
<ul class=“nav navbar-nav”>
<li class=“active”><a href=“#”>Home</a></li>
<li class=“dropdown”>
<a href=“#” data-toggle=“dropdown”>Products <b class=“caret”></b></a>
<ul class=“dropdown-menu”>
<li><a href=“#”>Product 1</a></li>
<li><a href=“#”>Product 2</a></li>
<li><a href=“#”>Product 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Product 4</a></li>
<li class=“divider”></li>
<li><a href=“#”>Product 5</a></li>
</ul>
</li>
<li><a href=“#”>Services</a></li>
<li><a href=“#”>About</a></li>
<li><a href=“#”>Contact</a></li>
</ul>
</div><!– /.navbar-collapse –>
</div><!– /.container-fluid –>
</nav>
<!– Navigation bar ends here –>
</div>
</body>
</html>
|
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.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>dropdown example</h1>
<!– Single button –>
<div class=“btn-group”>
<button type=“button” data-toggle=“dropdown”>
Button Dropdown Example <span></span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
<!– Single button –>
<div class=“btn-group”>
<button type=“button” data-toggle=“dropdown”>
Button Dropdown Example <span></span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
<!– Single button –>
<div class=“btn-group”>
<button type=“button” data-toggle=“dropdown”>
Button Dropdown Example <span></span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
</div>
</body>
</html>
|
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.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Bootstrap dropdown example</h1>
<!– Split button –>
<div class=“btn-group”>
<button type=“button”>Split Button Example</button>
<button type=“button” data-toggle=“dropdown”>
<span class=“caret”></span>
<span class=“sr-only”>Toggle Dropdown</span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
<!– Split button –>
<div class=“btn-group”>
<button type=“button”>Split Button Example</button>
<button type=“button” data-toggle=“dropdown”>
<span class=“caret”></span>
<span class=“sr-only”>Toggle Dropdown</span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
<!– Split button –>
<div class=“btn-group”>
<button type=“button”>Split Button Example</button>
<button type=“button” data-toggle=“dropdown”>
<span class=“caret”></span>
<span class=“sr-only”>Toggle Dropdown</span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
</div>
</body>
</html>
|
Button dropdown with different sizes example
You may choose different classes of buttons for various dropdown button sizes. You can choose from btn–lg, 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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>dropdown example</h1>
<!– Large button group –>
<div class=“btn-group”>
<button type=“button” data-toggle=“dropdown”>
Large button <span></span>
</button>
<ul class=“dropdown-menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
<!– Small button group –>
<div class=“btn-group”>
<button class=“btn btn-default btn-sm dropdown-toggle” type=“button” data-toggle=“dropdown”>
Small button <span></span>
</button>
<ul class=“dropdown-menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
<!– Extra small button group –>
<div class=“btn-group”>
<button class=“btn btn-default btn-xs dropdown-toggle” type=“button” data-toggle=“dropdown”>
Extra small button <span></span>
</button>
<ul class=“dropdown-menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
</div>
</body>
</html>
|
Useful Reading: Twitter Bootstrap Tutorial | Bootstrap Table | Bootstrap CSS | Bootstrap Form
Leave A Comment?