Bootstrap 5 Dropdowns Menu items
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.
HTML
<!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" >w3wiki</ 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.
HTML
<!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" >w3wiki</ 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
Contact Us