Dropdowns

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

Basic

Design
HTML

  <!-- collapse -->
	<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:

Design
HTML

<!-- Primary Dropdown -->
<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>

	<!-- Secondary Dropdown -->
	<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>

<!-- Success Dropdown -->
	<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>

<!-- Info Dropdown -->
	<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>

<!-- Warning Dropdown -->
	<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>

<!-- Danger Dropdown -->
	<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>

Sizing

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

Design
HTML

 <!-- 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="visually-hidden">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="visually-hidden">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.

Design
HTML

 <!-- 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="visually-hidden">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="visually-hidden">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="visually-hidden">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.

  <!-- Dropdown -->
<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>
  <!-- Right aligned menu -->
  <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>
  <!-- Left align, right align lg -->
  <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>
  <!-- Right aligned, left aligned lg -->
  <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>
  <!-- Dropstart -->
  <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>
  <!-- Dropend -->
  <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>
  <!-- Dropeup -->
  <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.

  <!-- Responsive Menu Alignment -->
<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>

Design
HTML

  <!-- Header -->
<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.

Design
HTML

  <!-- 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>

Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

Design
HTML

 <!-- With Text -->
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
  Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
  And this is more example text.
</p>
</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.

Design
HTML

  <!-- Forms -->
<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>

Design
HTML

  <!-- Form -->
<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>

Design
HTML

  <!-- Dropdown options -->
<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="visually-hidden">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>

Auto close behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.

Design
HTML

 <!-- Auto close behavior -->
	<div class="btn-group">
	<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
	  Default dropdown
	</button>
	<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
	  <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 class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
	  Clickable outside
	</button>
	<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
	  <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 class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
	  Clickable inside
	</button>
	<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
	  <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 class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
	  Manual close
	</button>
	<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
	  <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="d-flex gap-5" id="dropdownFilter">
<!-- Light dropdown filter  -->
<div class="dropdown-menu pt-0 mx-0 shadow overflow-hidden position-static d-block" style="width: 280px;">
  <form class="p-2 mb-2 bg-light border-bottom">
	<input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
  </form>
  <ul class="list-unstyled mb-0">
	<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
	  <span class="d-inline-block bg-success badge-dot icon-xs "></span>
	  Action
	</a></li>
	<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
	  <span class="d-inline-block bg-primary badge-dot icon-xs"></span>
	  Another action
	</a></li>
	<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
	  <span class="d-inline-block bg-danger badge-dot icon-xs"></span>
	  Something else here
	</a></li>
	<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
	  <span class="d-inline-block bg-info badge-dot icon-xs"></span>
	  Separated link
	</a></li>
  </ul>
</div>
                                                        <!-- Dark dropdown filter  -->
<div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 shadow overflow-hidden position-static d-block" style="width: 280px;">
	<form class="p-2 mb-2 bg-dark border-bottom border-dark ">
	  <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
	</form>
	<ul class="list-unstyled mb-0">
	  <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
		<span class="d-inline-block bg-success badge-dot icon-xs"></span>
		Action
	  </a></li>
	  <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
		<span class="d-inline-block bg-primary badge-dot icon-xs"></span>
		Another action
	  </a></li>
	  <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
		<span class="d-inline-block bg-danger badge-dot icon-xs"></span>
		Something else here
	  </a></li>
	  <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
		<span class="d-inline-block bg-info badge-dot icon-xs"></span>
		Separated link
	  </a></li>
	</ul>
  </div>
</div>

Design
HTML

<!-- With icon -->
<ul class="dropdown-menu mx-0 shadow d-block position-static" style="width: 220px;">
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16">
			<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h3a1 1 0 0 1-1-1V4z"/>
		  </svg>
	  Documents
	</a>
  </li>
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image-fill" viewBox="0 0 16 16">
			<path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/>
		  </svg>
	  Photos
	</a>
  </li>
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-film" viewBox="0 0 16 16">
			<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1h3zm8 8h3v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
		  </svg>
	  Movies
	</a>
  </li>
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-music-note-beamed" viewBox="0 0 16 16">
			<path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
			<path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
			<path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
		  </svg>
	  Music
	</a>
  </li>
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-joystick" viewBox="0 0 16 16">
			<path d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"/>
			<path d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"/>
		  </svg>
	  Games
	</a>
  </li>
  <li><hr class="dropdown-divider"></li>
  <li>
	<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
			<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
			<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4h3.118zM2.5 3V2h11v1h-11z"/>
		  </svg>
	  Trash
	</a>
  </li>
</ul>
	<!-- With icon -->
<ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow d-block position-static" style="width: 220px;">
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16">
			<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h3a1 1 0 0 1-1-1V4z"/>
		  </svg>
	  Documents
	</a>
  </li>
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image-fill" viewBox="0 0 16 16">
			<path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/>
		  </svg>
	  Photos
	</a>
  </li>
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-film" viewBox="0 0 16 16">
			<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1h3zm8 8h3v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
		  </svg>
	  Movies
	</a>
  </li>
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-music-note-beamed" viewBox="0 0 16 16">
			<path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
			<path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
			<path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
		  </svg>
	  Music
	</a>
  </li>
  <li>
	<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-joystick" viewBox="0 0 16 16">
			<path d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"/>
			<path d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"/>
		  </svg>
	  Games
	</a>
  </li>
  <li><hr class="dropdown-divider"></li>
  <li>
	<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
			<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
			<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4h3.118zM2.5 3V2h11v1h-11z"/>
		  </svg>
	  Trash
	</a>
  </li>
</ul>

Dropdowns

Basic

Options

Color

Sizing

Directions

Menu Alignment

Responsive Menu Alignment

Menu content

Header

Dropdown header

Dividers

Text

Forms

Dropdown Option

Auto close behavior

Examples

With Filter

With Icon