Silicon
Dropdowns
Toggle contextual overlays for displaying lists of links or other content.
Static examples
<!-- Basic dropdown -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item" href="#">Another regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
</div>
<!-- Dropdown with header and divider -->
<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>
<hr class="dropdown-divider">
<a class="dropdown-item" href="#">Separated link</a>
</div>
<!-- Dropdown with icons and badges -->
<div class="dropdown-menu">
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-home-alt opacity-70 me-2"></i>
Home
<span class="badge rounded-pill bg-secondary ms-2">2</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-user opacity-70 me-2"></i>
Profile
<span class="badge rounded-pill bg-danger ms-2">3</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-message opacity-70 me-2"></i>
Messages
<span class="badge rounded-pill bg-success ms-2">5</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-cog opacity-70 me-2"></i>
Settings
<span class="badge rounded-pill bg-warning ms-2">1</span>
</a>
</div>Dark dropdowns
<!-- Basic dark dropdown -->
<div class="dropdown-menu dropdown-menu-dark">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item" href="#">Another regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
</div>
<!-- Dark dropdown with header and divider -->
<div class="dropdown-menu dropdown-menu-dark">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<hr class="dropdown-divider">
<a class="dropdown-item" href="#">Separated link</a>
</div>
<!-- Dark dropdown with icons and badges -->
<div class="dropdown-menu dropdown-menu-dark">
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-home-alt opacity-70 me-2"></i>
Home
<span class="badge rounded-pill bg-secondary ms-2">2</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-user opacity-70 me-2"></i>
Profile
<span class="badge rounded-pill bg-danger ms-2">3</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-message opacity-70 me-2"></i>
Messages
<span class="badge rounded-pill bg-success ms-2">5</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-cog opacity-70 me-2"></i>
Settings
<span class="badge rounded-pill bg-warning ms-2">1</span>
</a>
</div>Forms inside dropdown
<!-- Forms inside dropdown -->
<div class="dropdown-menu" style="width: 20rem;">
<form class="p-4">
<div class="mb-4">
<label for="exampleDropdownFormEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com" required>
</div>
<div class="mb-4">
<label for="exampleDropdownFormPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password" required>
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label for="dropdownCheck" class="form-check-label">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
</div>Directions
<!-- Dropdown -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu my-1">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropup -->
<div class="btn-group dropup">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu my-1">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropend -->
<div class="btn-group dropend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropend
</button>
<div class="dropdown-menu mx-1">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropstart -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropstart
</button>
<div class="dropdown-menu mx-1">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>Menu alignment
<!-- Dropdown -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu example
</button>
<div class="dropdown-menu dropdown-menu-end my-1">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>