Core Code
Core Code Modern Dev Handbook

Dark Dropdown Menu

Use dropdown-menu-dark to create dark styled menus.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="bg-dark">

<div class="container py-5">

<div class="dropdown">

<button class="btn btn-light dropdown-toggle"
data-bs-toggle="dropdown">
Dark Menu
</button>

<ul class="dropdown-menu dropdown-menu-dark">

<li><a class="dropdown-item" href="#">Item 1</a></li>
<li><a class="dropdown-item" href="#">Item 2</a></li>

</ul>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

More BS5 Dropdown Examples (7)

example Basic Dropdown open example example Split Button Dropdown open example example Dropdown Alignment open example example Dropdown with Header open example example Dropup Menu open example example Dropdown in Button Group open example example Navbar Dropdown open example