Developed by Codescandy

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Basic

<div class="dropdown">
	  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropdown button
	  </button>
	  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
	  </div>
	</div>

Options

The best part is you can do this with any button variant, too:

Color

The best part is you can do this with any button variant, too:

<div class="btn-group">
	  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div><!-- /btn-group -->
	<div class="btn-group">
	  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div><!-- /btn-group -->
	<div class="btn-group">
	  <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div><!-- /btn-group -->
	<div class="btn-group">
	  <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div><!-- /btn-group -->
	<div class="btn-group">
	  <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div><!-- /btn-group -->
	<div class="btn-group">
	  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div><!-- /btn-group -->

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

 <!-- Large button groups (default and split) -->
	<div class="btn-group">
	  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Large button
	  </button>
	  <div class="dropdown-menu">
	  <a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>
	<div class="btn-group">
	  <button class="btn btn-secondary btn-lg" type="button">
		Large split button
	  </button>
	  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	  </button>
	  <div class="dropdown-menu">
	 <a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>

	<!-- Small button groups (default and split) -->
	<div class="btn-group">
	  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Small button
	  </button>
	  <div class="dropdown-menu">
	   <a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>
	<div class="btn-group">
	  <button class="btn btn-secondary btn-sm" type="button">
		Small split button
	  </button>
	  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	  </button>
	  <div class="dropdown-menu">
	   <a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>

Directions

Trigger dropdown menus above elements by adding .dropup,.dropleft,.dropright to the parent element.

 <!-- Default dropup button -->
	<div class="btn-group dropup">
	  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropup
	  </button>
	  <div class="dropdown-menu">
	   <a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>

	<!-- Split dropup button -->
	<div class="btn-group dropup">
	  <button type="button" class="btn btn-secondary">
		Split dropup
	  </button>
	  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	  </button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>

	<!-- Default dropright button -->
	<div class="btn-group dropright">
	  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropright
	  </button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>

	<!-- Split dropright button -->
	<div class="btn-group dropright">
	  <button type="button" class="btn btn-secondary">
		Split dropright
	  </button>
	  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropright</span>
	  </button>
	  <div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>

	<!-- Default dropleft button -->
	<div class="btn-group dropleft">
	  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropleft
	  </button>
	  <div class="dropdown-menu">
	  <a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>

	<!-- Split dropleft button -->
	<div class="btn-group">
	  <div class="btn-group dropleft" role="group">
		<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		  <span class="sr-only">Toggle Dropleft</span>
		</button>
		<div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
		</div>
	  </div>
	  <button type="button" class="btn btn-secondary">
		Split dropleft
	  </button>
	</div>

Menu Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

<div class="btn-group">
																<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
																  Dropdown
																</button>
																<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																</ul>
															  </div>

															  <div class="btn-group">
																<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
																  Right-aligned menu
																</button>
																<ul class="dropdown-menu dropdown-menu-end">
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																</ul>
															  </div>

															  <div class="btn-group">
																<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
																  Left-aligned, right-aligned lg
																</button>
																<ul class="dropdown-menu dropdown-menu-lg-end">
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																</ul>
															  </div>

															  <div class="btn-group">
																<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
																  Right-aligned, left-aligned lg
																</button>
																<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																</ul>
															  </div>

															  <div class="btn-group dropstart">
																<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
																  Dropstart
																</button>
																<ul class="dropdown-menu">
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																</ul>
															  </div>

															  <div class="btn-group dropend">
																<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
																  Dropend
																</button>
																<ul class="dropdown-menu">
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																</ul>
															  </div>

															  <div class="btn-group dropup">
																<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
																  Dropup
																</button>
																<ul class="dropdown-menu">
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																  <li><a class="dropdown-item" href="#">Menu item</a></li>
																</ul>
															  </div>

Responsive Menu Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

<div class="btn-group">
																<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
																  Left-aligned but right aligned when large screen
																</button>
																<ul class="dropdown-menu dropdown-menu-lg-right">
																  <li><button class="dropdown-item" type="button">Action</button></li>
																  <li><button class="dropdown-item" type="button">Another action</button></li>
																  <li><button class="dropdown-item" type="button">Something else here</button></li>
																</ul>
															  </div>
															  <div class="btn-group">
																<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
																  Right-aligned but left aligned when large screen
																</button>
																<ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
																  <li><button class="dropdown-item" type="button">Action</button></li>
																  <li><button class="dropdown-item" type="button">Another action</button></li>
																  <li><button class="dropdown-item" type="button">Something else here</button></li>
																</ul>
															  </div>

Menu content

Header

Add a header to label sections of actions in any dropdown menu.

Dropdown header
Action Another action 
<div class="dropdown-menu">
	  <h6 class="dropdown-header">Dropdown header</h6>
	  <a class="dropdown-item" href="#">Action</a>
	  <a class="dropdown-item" href="#">Another action</a>
	</div>

Dividers

Separate groups of related menu items with a divider.

<div class="dropdown-menu">
	  <a class="dropdown-item" href="#">Action</a>
	  <a class="dropdown-item" href="#">Another action</a>
	  <a class="dropdown-item" href="#">Something else here</a>
	  <div class="dropdown-divider"></div>
	  <a class="dropdown-item" href="#">Separated link</a>
	</div>

Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

New around here? Sign up Forgot password? 
<div class="dropdown-menu">
	  <form class="px-4 py-3">
		<div class="mb-3">
		  <label for="exampleDropdownFormEmail1">Email address</label>
		  <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
		</div>
		<div class="mb-3">
		  <label for="exampleDropdownFormPassword1">Password</label>
		  <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
		</div>
		<div class="mb-3">
		  <div class="form-check">
			<input type="checkbox" class="form-check-input" id="dropdownCheck">
			<label class="form-check-label" for="dropdownCheck">
			  Remember me
			</label>
		  </div>
		</div>
		<button type="submit" class="btn btn-primary">Sign in</button>
	  </form>
	  <div class="dropdown-divider"></div>
	  <a class="dropdown-item" href="#">New around here? Sign up</a>
	  <a class="dropdown-item" href="#">Forgot password?</a>
	</div>
<form class="dropdown-menu p-4">
	  <div class="mb-3">
		<label for="exampleDropdownFormEmail2">Email address</label>
		<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
	  </div>
	  <div class="mb-3">
		<label for="exampleDropdownFormPassword2">Password</label>
		<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
	  </div>
	  <div class="form-check">
		<input type="checkbox" class="form-check-input" id="dropdownCheck2">
		<label class="form-check-label" for="dropdownCheck2">
		  Remember me
		</label>
	  </div>
	  <button type="submit" class="btn btn-primary">Sign in</button>
	</form>
<div class="d-flex">
																<div class="dropdown me-1">
																  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
																	Offset
																  </button>
																  <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
																	<li><a class="dropdown-item" href="#">Action</a></li>
																	<li><a class="dropdown-item" href="#">Another action</a></li>
																	<li><a class="dropdown-item" href="#">Something else here</a></li>
																  </ul>
																</div>
																<div class="btn-group">
																  <button type="button" class="btn btn-secondary">Reference</button>
																  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
																	<span class="sr-only">Toggle Dropdown</span>
																  </button>
																  <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
																	<li><a class="dropdown-item" href="#">Action</a></li>
																	<li><a class="dropdown-item" href="#">Another action</a></li>
																	<li><a class="dropdown-item" href="#">Something else here</a></li>
																	<li><hr class="dropdown-divider"></li>
																	<li><a class="dropdown-item" href="#">Separated link</a></li>
																  </ul>
																</div>
															  </div>