Dropdowns
Toggle contextual overlays for displaying lists of links or other content.
Static examples
<!-- Basic dropdown -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item" href="#">Another regular link</a></li>
<li><a class="dropdown-item active" href="#">Active link</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled link</a></li>
</ul>
<!-- Dropdown with header and divider -->
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<!-- Dropdown with icons and badges -->
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
<i class="ci-home opacity-75 me-2"></i>
Home
<span class="badge bg-primary rounded-pill ms-auto">2</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-user opacity-75 me-2"></i>
Profile
<span class="badge bg-warning rounded-pill ms-auto">3</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-message-square opacity-75 me-2"></i>
Messages
<span class="badge bg-success rounded-pill ms-auto">5</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-settings opacity-75 me-2"></i>
Settings
</a>
</li>
</ul>Dark dropdowns
<!-- Basic dark dropdown -->
<ul class="dropdown-menu" data-bs-theme="dark">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item" href="#">Another regular link</a></li>
<li><a class="dropdown-item active" href="#">Active link</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled link</a></li>
</ul>
<!-- Dark dropdown with header and divider -->
<ul class="dropdown-menu" data-bs-theme="dark">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<!-- Dark dropdown with icons and badges -->
<ul class="dropdown-menu" data-bs-theme="dark">
<li>
<a class="dropdown-item" href="#">
<i class="ci-home opacity-75 me-2"></i>
Home
<span class="badge bg-primary rounded-pill ms-auto">2</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-user opacity-75 me-2"></i>
Profile
<span class="badge bg-warning rounded-pill ms-auto">3</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-message-square opacity-75 me-2"></i>
Messages
<span class="badge bg-success rounded-pill ms-auto">5</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-settings opacity-75 me-2"></i>
Settings
</a>
</li>
</ul>Forms inside dropdown
<!-- Forms inside dropdown -->
<div class="dropdown-menu">
<form class="p-3" autocomplete="off">
<div class="mb-3">
<label class="form-label" for="exampleDropdownFormEmail">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com" required>
</div>
<div class="mb-3">
<label class="form-label" for="exampleDropdownFormPassword">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password" required>
</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>Directions
<!-- Dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- Dropup -->
<div class="dropup">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- Dropend -->
<div class="dropend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropend</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- Dropstart -->
<div class="dropstart">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropstart</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>Show on hover / focus
<!-- Change data-bs-toggle attribute from "dropdown" to "dropdown-hover" to trigger dropdown menu on hover or focus. -->
<div class="dropdown">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-haspopup="true" aria-expanded="false">
Hover or focus over me
</button>
<ul class="dropdown-menu">
<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>Menu alignment
<!-- Right-aligned dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<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>
<!-- Center-aligned dropdown -->
<div class="dropdown-center">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Center-aligned dropdown
</button>
<ul class="dropdown-menu">
<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>Split button
<!-- Solid split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split position-relative z-1 border-0 border-start border-light" style="--cz-border-opacity: .25;" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">Toggle dropdown</span>
</button>
<ul class="dropdown-menu">
<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>
<!-- Solid split button -->
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Button</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="visually-hidden">Toggle dropdown</span></button>
<ul class="dropdown-menu">
<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>