Bootstrap 5 Dropdowns

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.

• Dropdowns Single Button: It is used to turn a button into a dropdown toggle with some basic markup.
• Dropdowns Split button:  It is used to turn a button into a dropdown toggle with some basic markup. 
• Dropdowns Sizing:It is used to create dropdowns on different sizes of buttons. 
• Dropdowns Dark dropdowns: Bootstrap 5 Dropdowns Dark dropdowns are needed to match the navbar or site theme.
• Dropdowns Directions: It  is used to show dropdown menus above the parent elements by using the .dropup class.
• Dropdowns Dropup:  It is used to show dropdown menus above the parent elements by using the .dropup class.
• Dropdowns Dropright:  It is used to open the dropdown on the right-hand side of the user, We can one the dropdwons anywhere 
• Dropdowns Dropleft: It is used to open the dropdown on the left-hand side of the user. 
• Dropdowns Menu items:
• Dropdowns Active: Set the state of any item in the dropdown menu as active. 
• Dropdowns Disabled: It is used to disable some text items in the dropdown.
• Dropdowns Menu alignment: Menu alignment classes dropdown menu can be aligned in any direction like the end, start, drop start,dropUp, etc
• Dropdowns Menu content: A drop-down menu is a collection of menu items that allow users to choose a value from the list. 
• Dropdowns Options: Bootstrap 5  Dropdowns Options can be passed through the data attributes or JavaScript.
• Dropdowns Auto close behavior: It is used to make the dropdowns close when we click outside of that dropdown or that particular button. 
• Dropdowns Sass:
• Dropdowns Via data Attributes: It is  used to define our own custom data attributes.  Dropdowns Via JavaScript:
• Dropdowns options:
• Dropdowns Methods:
• Dropdowns Events:Events fired when interacting with the Bootstrap 5 dropdown. 
  

Syntax:

<div class="dropdown"> Contents... <div>

Example 1: This example shows the working of a dropdown with button in Bootstrap 5.

Output:

Dropdown Divider: The .dropdown-divider class is used to divide the dropdown menu list by using a thin horizontal line. This example shows the working of collapsible cards in Bootstrap 5.

Output:

Dropdown Header: The .dropdown-header class is used to add header section inside the dropdown list. 

Output:

Disable and Active items: The .active class is used to add the highlight the list items. The .disabled class is used to disable the list items. 

Output:

Dropdown Position: The .dropright and .dropleft classes are used to set the position of the dropdown menu in the left and right sides. 

Example 1:

Output:

Example 2:

Output:

Dropdown Menu Right Aligned: The .dropdown-menu-right class is used to set the right-align of the dropdown menu. 

Output:

Dropup: The .dropup class is used instead of .dropdown class to expand the menu list in upwards direction. 

Output:

Dropdown Text: The .dropdown-item-text class adds plain text to the dropdown menu list. 

Output:

Grouped Buttons with a Dropdown: The .btn-group class is used to create a group of buttons and the .dropdown-menu class is used to create a dropdown list. 

Output:

Split Button Dropdowns: The .dropdown-toggle-split class is used to split the dropdown buttons. 

Output:

Vertical Button Group Dropdown List: The .btn-group-vertical class is used to create vertical button group with the dropdown list. 

Output:

Reference:https://getbootstrap.com/docs/5.2/components/dropdowns/