Dropdowns

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

Basic

Design
HTML

<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

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

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="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.

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="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>

Design
HTML

<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

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

Design
HTML

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