Bootstrap Dropdown

Bootstrap dropdowns are a versatile way to add interactive menus to your web application. With just a few classes, Bootstrap provides a ready-to-use dropdown component that can be used in navigation, forms, or anywhere else where you need a list of selectable options.

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection

Basic Dropdown

To create a dropdown, you need a div with the class dropdown, a button or link with dropdown-toggle, and a div with the dropdown-menu class for the dropdown items.

Example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Example Explained

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-bs-toggle="dropdown" attribute.

Add the .dropdown-menu class to a container element, like <div> or <ul>, to actually build the dropdown menu. Then add the .dropdown-item class to each element (links or buttons) inside the dropdown menu.

Dropdown Divider

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border:

Example:
<li><hr class="dropdown-divider"></hr></li>

Dropdown Header

The .dropdown-header class is used to add headers inside the dropdown menu:

<li><h4 class="dropdown-header">Dropdown header 1</h4></li>

Disable and Active items

Highlight a specific dropdown item with the .active class (adds a blue background color).

To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a "no-parking-sign" icon on hover):

Example:
<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item active" href="#">Active</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled</a></li>

Dropdown Position

You can also create a "dropend" or "dropstart" menu, by adding the .dropend or .dropstart class to the dropdown element. Note that the caret/arrow is added automatically:

Dropright:
<div class="dropdown dropend">

Dropleft:
<div class="dropdown dropstart">

Dropdown Menu Right

To right-align the dropdown menu, add the .dropdown-menu-end class to the element with .dropdown-menu:

Example:
<div class="dropdown-menu dropdown-menu-end">

Dropdown Menu Right

If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to "dropup":

Example:
<div class="dropup">

Dropdown Text

The .dropdown-item-text class is used to add plain text to a dropdown item, or used on links for default link styling.

Example:
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item-text" href="#"<Text Link</a></li>
<li><span class="dropdown-item-text">Just Text</span></li>
</ul>

Key ponts of Bootstrap Dropdown

1. Basic Structure

• A dropdown consists of a wrapper div with the dropdown class, a toggle element (usually a button or a) with dropdown-toggle, and a div or ul with the dropdown-menu class for the menu items.

2. Toggle and Dropdown Items

• Use the data-bs-toggle="dropdown" attribute on the toggle element to trigger the dropdown.
• Each item inside the dropdown menu should have the dropdown-item class, allowing you to style them consistently.

3. Dropdown Variations

• Alignment: Control the alignment with .dropdown-menu-end to align right.
• Dividers: Use <hr class="dropdown-divider"> for dividing sections within the dropdown.
• Disabled Items: Apply disabled or aria-disabled="true" on items to disable them.

4. Positioning

• Use .dropup, .dropend, and .dropstart classes to control the position of the dropdown relative to the toggle button:

5. Responsive and Navbar Integration

• Dropdowns are responsive by default and integrate smoothly into navbars, with additional alignment options.
• Dropdowns in navbars should use role="button" and other ARIA attributes for accessibility.

6. JavaScript Control

• Dropdowns can be triggered with data attributes or JavaScript for custom behavior.

7. Accessiblity

• Dropdowns use ARIA roles (aria-haspopup="true" and aria-expanded) for screen reader compatibility.

8. Customizing and Styling

• Customize dropdowns using additional classes, or by applying custom styles to .dropdown-menu and .dropdown-item as needed.