Bootstrap 5 Dropdowns Menu items are a list of options on a website that appears only when a user interacts with the menu, like by clicking on it or hovering over it.
Bootstrap 5 Dropdowns Menu items:
- Bootstrap 5 Dropdowns Menu items Active: It helps to set the state of any item in the dropdown menu as active
- Bootstrap 5 Dropdowns Menu items Disabled: It used to disable some text items in the dropdown
Example 1: In this example, we set an option active in the dropdown menu by using the .active class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body class="m-3">
<div class="container text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Dropdowns Menu items</h5>
</div>
<div class="p-4 border bg-light text-center">
<div class="btn-group dropend" role="group">
<button class="btn btn-success dropdown-toggle"
type="button" data-bs-toggle="dropdown">
Select the State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Uttar Pradesh</a>
</li>
<li><a class="dropdown-item" href="#">
Goa</a>
</li>
<li><a class="dropdown-item active" href="#"
aria-current="true">
Madhya pradesh</a>
</li>
<li><a class="dropdown-item" href="#">
Rajasthan</a>
</li>
<li><a class="dropdown-item" href="#">
Gujrat</a>
</li>
<li><a class="dropdown-item" href="#">
Assam</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we set an option disabled in the dropdown menu by using the .disabled class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body class="m-3">
<div class="container text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Dropdowns Menu items</h5>
</div>
<div class="p-4 border bg-light text-center">
<div class="btn-group dropstart" role="group">
<button class="btn btn-danger dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Select the University
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
CSJM University</a>
</li>
<li><a class="dropdown-item" href="#">
MJPRU University</a></li>
<li><a class="dropdown-item" href="#">
Invertis University</a>
</li>
<li><a class="dropdown-item disabled" href="#"
tabindex="-1" aria-disabled="true">
Agra University</a>
</li>
<li><a class="dropdown-item" href="#">
Kanpur University</a>
</li>
<li><a class="dropdown-item" href="#">
Allahabad University</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-items