Menu
Bootstrap 5 Dropdowns
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle=”dropdown”.</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Dropdown button
</button>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Example Explained
The .dropdown class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-bs-toggle="dropdown" attribute.
Add the .dropdown-menu class to a <div> element to actually build the dropdown menu. Then add the .dropdown-item class to each element (links or buttons) inside the dropdown menu.
Dropdown Divider
The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Dropdowns</h2>
<p>The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Dropdown button
</button>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><hr></li>
<li><a href=”#”>Another link</a></li>
</ul>
</div>
</div>
</body>
</html>
Dropdown Header
The .dropdown-header class is used to add headers inside the dropdown menu:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Dropdown button
</button>
<ul>
<li><h5>Dropdown header 1</h5></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><h5>Dropdown header 2</h5></li>
<li><a href=”#”>Another link</a></li>
</ul>
</div>
</div>
</body>
</html>
Disable and Active items
Highlight a specific dropdown item with the .active class (adds a blue background color).
To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a “no-parking-sign” icon on hover):
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item (grey text color and a no-parking-sign on hover).</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Dropdown button
</button>
<ul>
<li><a href=”#”>Normal</a></li>
<li><a href=”#”>Active</a></li>
<li><a href=”#”>Disabled</a></li>
</ul>
</div>
</div>
</body>
</html>
Dropdown Position
You can also create a “dropend” or “dropstart” menu, by adding the .dropend or .dropstart class to the dropdown element. Note that the caret/arrow is added automatically:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Dropdowns</h2>
<p>Add the .dropend class next to the dropdown menu to right-align the dropdown. Note that the caret/arrows is added automatically:</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Dropend
</button>
<ul>
<li><a href=”#”>Normal</a></li>
<li><a href=”#”>Active</a></li>
<li><a href=”#”>Disabled</a></li>
</ul>
</div>
</div>
</body>
</html>
Dropdown Menu Right
To right-align the dropdown menu, add the .dropdown-menu-end class to the element with .dropdown-menu:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Dropdowns</h2>
<p>Add the .dropdown-menu-end class to .dropdown-menu to right-align the dropdown menu.</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Wide dropdown button to demonstrate this example
</button>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Dropup
If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with to "dropup":
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<p>It must be room for the dropup menu to grow. That is why we add some extra lorem ipsum text.</p>
<p>Lorem ipsum one more time!</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Dropup button
</button>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Dropdown Text
The .dropdown-item-text class is used to add plain text to a dropdown item, or used on links for default link styling.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Dropdowns</h2>
<p>The .dropdown-item-text class is used to add plain text to a dropdown, or used on links for default link styling.</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Dropdown button
</button>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Text Link</a></li>
<li><span>Just Text</span></li>
</ul>
</div>
</div>
</body>
</html>
Grouped Buttons with a Dropdown
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create dropdown menus:</p>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<div>
<button type=”button” data-bs-toggle=”dropdown”>Sony</button>
<ul>
<li><a href=”#”>Tablet</a></li>
<li><a href=”#”>Smartphone</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Vertical Button Group w/ Dropdown
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Vertical Button Group with Dropdown</h2>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<div>
<button type=”button” data-bs-toggle=”dropdown”>Sony</button>
<ul>
<li><a href=”#”>Tablet</a></li>
<li><a href=”#”>Smartphone</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>