BS5 Dropdowns

In Bootstrap 5, dropdowns are interactive components that allow users to select options or access additional content by clicking on a button or trigger element. Dropdowns can be used for various purposes, such as displaying a list of options, navigation menus, or displaying additional actions.


Here's an example of how to create a basic dropdown in Bootstrap 5:

html
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> 
        Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Option 1</a></li>
        <li><a class="dropdown-item" href="#">Option 2</a></li>
        <li><a class="dropdown-item" href="#">Option 3</a></li>
    </ul>
</div>

In this example, a basic dropdown is created using the `<div>` element with the class `dropdown`. The button element with the classes `btn`, `btn-secondary`, and `dropdown-toggle` serves as the dropdown trigger. The `data-bs-toggle` attribute set to "dropdown" and the `aria-expanded` attribute set to "false" indicate that it's a dropdown element.


The dropdown menu is represented by the `<ul>` element with the class `dropdown-menu`. Each item in the dropdown is defined by an `<li>` element, and the options are represented by `<a>` elements with the class `dropdown-item`.

You can customize the appearance and behavior of dropdowns by adding additional classes, such as `dropdown-menu-end` to align the menu to the right, or by using JavaScript to handle events and add dynamic functionality.

Bootstrap 5 also provides more advanced options for dropdowns, such as split dropdown buttons and dropdowns with forms. You can refer to the Bootstrap documentation for more details and examples on working with dropdowns in Bootstrap 5.



About the Author



Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc





 PreviousNext