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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ 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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ 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