Bootstrap 5 Dropdowns Disabled is used to disable some text items in the dropdown. A disabled drop-down list is unusable and un-clickable.
Bootstrap 5 Dropdowns Disabled classes: There is no specific class for the Bootstrap 5 Dropdowns disabled feature, we need to add a combination of Bootstrap5 Dropdown classes.
Bootstrap 5 Dropdowns Disabled Attribute:
- disabled: This attribute is used to make the dropdown disabled.
Syntax:
<div class="dropdown" ...>
<button class="btn dropdown-toggle"
type="button"
data-bs-toggle="dropdown">
....
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">...</a></li>
<li><a class="dropdown-item disabled"..>...</a></li>
....
</ul>
...
</div>
Example 1: In this example, we set buttons using btn class, the button turned into a dropdown toggle, and disabled the text item in the dropdown.
<!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 Disabled</h5>
</div>
<div class="dropdown p-4 border bg-light
text-center dropend" style="height:130px;">
<button class="btn btn-success dropdown-toggle"
type="button" data-bs-toggle="dropdown">
Select the city
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Agra</a></li>
<li><a class="dropdown-item" href="#">
Rampur</a></li>
<li><a class="dropdown-item" href="#">
Praygraj</a></li>
<li><a class="dropdown-item" href="#">
kanpur</a></li>
<li><a class="dropdown-item disabled"
href="#" tabindex="-1">
Delhi
</a>
</li>
<li><a class="dropdown-item" href="#">
Lucknow</a></li>
</ul>
</div>
</body>
</html>
Output:
Example 2: In this example, we set multiple buttons with a dropdown toggle to show the menu and use disabled class to disable the text in the dropdown.
<!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 Disabled</h5>
</div>
<div class="p-3 border bg-light text-center"
style="height:120px;">
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<button type="button" class="btn btn-danger">
Choose the Phone
</button>
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Redmi</a></li>
<li><a class="dropdown-item" href="#"
>Realme</a></li>
<li><a class="dropdown-item" href="#">
Samsung A1</a></li>
<li><a class="dropdown-item disabled"
href="#" tabindex="-2">
Iphone 12</a></li>
<li><a class="dropdown-item" href="#">
Motorola G2</a></li>
<li><a class="dropdown-item disabled" href="#"
tabindex="-2">
Vivo T1</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-primary">
Choose the Company
</button>
<button type="button" class="btn btn-success
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Amazon</a></li>
<li><a class="dropdown-item" href="#">
GeeksforGeeks</a></li>
<li><a class="dropdown-item disabled"
href="#" tabindex="-3">
Reliance JIO</a></li>
<li><a class="dropdown-item" href="#">
Tesla</a></li>
<li><a class="dropdown-item disabled"
href="#" tabindex="-3">Messo</a></li>
<li><a class="dropdown-item" href="#">
Tata Motors</a></li>
</ul>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#disabled