bootstrap dropdown

1<div class="dropdown">
2  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3    Dropdown
4  </button>
5  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
6    <button class="dropdown-item" type="button">Action</button>
7    <button class="dropdown-item" type="button">Another action</button>
8    <button class="dropdown-item" type="button">Something else here</button>
9  </div>
10</div>

1<div class="dropdown show">
2  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3    Dropdown link
4  </a>
5
6  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
7    <a class="dropdown-item" href="#">Action</a>
8    <a class="dropdown-item" href="#">Another action</a>
9    <a class="dropdown-item" href="#">Something else here</a>
10  </div>
11</div>

1<div class="dropdown">
2  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
3    Dropdown button
4  </button>
5  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
6    <li><a class="dropdown-item active" href="#">Action</a></li>
7    <li><a class="dropdown-item" href="#">Another action</a></li>
8    <li><a class="dropdown-item" href="#">Something else here</a></li>
9    <li><hr class="dropdown-divider"></li>
10    <li><a class="dropdown-item" href="#">Separated link</a></li>
11  </ul>
12</div>

1<!-- Bootstrap 5 Dropdown -->
2<div class="dropdown">
3   <button
4      class="btn btn-secondary dropdown-toggle"
5      type="button"
6      id="dropdownMenuButton1"
7      data-bs-toggle="dropdown"
8      aria-expanded="false"
9   >
10      Dropdown button
11   </button>
12   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
13      <li><a class="dropdown-item" href="#">Action</a></li>
14      <li><a class="dropdown-item" href="#">Another action</a></li>
15      <li><a class="dropdown-item" href="#">Something else here</a></li>
16   </ul>
17</div>

1<!-- Bootstrap 3.3 Dropdown -->
2<div class="dropdown">
3  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
4    Dropdown trigger
5    <span class="caret"></span>
6  </button>
7  <ul class="dropdown-menu" aria-labelledby="dLabel">
8    ...
9  </ul>
10</div>

1.dropdown
2Add a simple dropdown menu with buttons.
3<div class=”dropdown”>
4 <button class=”btn btn-secondary dropdown-toggle”
5 type=”button” id=”dropdownMenu1” data-toggle=”dropdown”
6 aria-haspopup=”true” aria-expanded=”false”>
7 Dropdown
8 </button>
9 <div class=”dropdown-menu” aria-labelledby=”dropdownMenu1”>
10 <a class=”dropdown-item” href=”#!”>Action</a>
11 <a class=”dropdown-item” href=”#!”>Another action</a>
12 </div>
13</div>
14.dropdown-toggle-split
15Create split button dropdowns with proper spacing around the dropdown caret.
16<div class=”btn-group”>
17 <button type=”button” class=”btn btn-secondary”>Dropdown</button>
18 <button type=”button” class=”btn btn-secondary dropdown-toggle dropdown-togglesplit” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
19 <span class=”sr-only”>Toggle Dropdown</span>
20 </button>
21 <div class=”dropdown-menu”>
22 <a class=”dropdown-item” href=”#!”>Action</a>
23 <a class=”dropdown-item” href=”#!”>Another action</a>
24 </div>
25</div>
26.dropup
27Did you know that you can style a menu coming up rather than down? Now you do!
28<!-- Default dropup button -->
29<div class=”btn-group dropup”>
30 <button type=”button” class=”btn btn-secondary dropdown-toggle” datatoggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
31 Dropup
32 </button>
33 <div class=”dropdown-menu”>
34 <!-- Dropdown menu links -->
35 </div>
36</div>
37.dropright
38Provide the menu to the right of the button.
39 <!-- Default dropright button -->
40<div class=”btn-group dropright”>
41 <button type=”button” class=”btn btn-secondary dropdown-toggle” datatoggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
42 Dropright
43 </button>
44 <div class=”dropdown-menu”>
45 <!-- Dropdown menu links -->
46  </div>
47</div>
48.dropleft
49...And you can also display the menu on the left.
50<!-- Default dropleft button -->
51<div class=”btn-group dropleft”>
52 <button type=”button” class=”btn btn-secondary dropdown-toggle” datatoggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
53 Dropleft
54 </button>
55 <div class=”dropdown-menu”>
56 <!-- Dropdown menu links -->
57 </div>
58</div>
59.dropdown-item-text
60Add non-interactive dropdown items to your menu.
61<div class=”dropdown-menu”>
62 <span class=”dropdown-item-text”>Plain text</span>
63 <a class=”dropdown-item” href=”#”>Clickable action</a>
64 <a class=”dropdown-item” href=”#”>Another action</a>
65 <a class=”dropdown-item” href=”#”>Whatever else you need</a>
66</div>
67.dropdown-item disabled
68You can also choose to disable any menu item(s).
69<div class=”dropdown-menu”>
70 <a class=”dropdown-item” href=”#”>Active link</a>
71 <a class=”dropdown-item disabled” href=”#”>Disabled link</a>
72 <a class=”dropdown-item” href=”#”>One more link</a>
73</div>
74.dropdown-divider
75Add a simple divider between menu elements to draw extra attention.
76<div class=”dropdown-divider”></div>
77.dropdown-menu-right
78Align the entire menu to the right
79<div class=”btn-group”>
80 <button type=”button” class=”btn btn-secondary dropdown-toggle” datatoggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
81 This dropdown’s menu is right-aligned
82 </button>
83 <div class=”dropdown-menu dropdown-menu-right”>
84 <button class=”dropdown-item” type=”button”>Action</button>
85 <button class=”dropdown-item” type=”button”>Another action</button>
86 <button class=”dropdown-item” type=”button”>Something else here</button>
87 </div>
88</div>