Basic Dropdowns in Bootstrap

Bootstrap's dropdown component provides a simple way to display a menu of actions or options when a user interacts with a button or link. Dropdowns are commonly used in navigation bars, buttons, or as part of other UI elements to offer additional choices.

1. Basic Dropdown Structure

A basic dropdown in Bootstrap consists of a toggle element (usually a button) and a dropdown menu that contains the dropdown items.

a. Basic Dropdown Button

The dropdown button is the element that users click to open the dropdown menu.

Example:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

• .dropdown: The container for the dropdown button and menu.
• .btn: The button class used for styling.
• .dropdown-toggle: The class that adds the toggle behavior to the button.
• data-bs-toggle="dropdown": Specifies that the button will toggle the dropdown menu.
• .dropdown-menu: The class that styles and positions the dropdown menu.
• .dropdown-item: The class for each item in the dropdown menu.

b. Dropdown Menu Items

The dropdown menu items are the individual options within the dropdown menu.

Example:

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <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>

• <li>: Each list item represents a dropdown item.
• <a class="dropdown-item">: Styles the items within the dropdown menu.

2. Dropdown Variants

Bootstrap provides a few variants to customize the dropdown's appearance and behavior.

a. Dropup

A dropup is a dropdown menu that opens upwards instead of downwards.

Example:

<div class="dropdown dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
    <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>

• .dropup: Adds the dropup behavior to the dropdown.

b. Dropstart and Dropright

The dropstart and dropright variants make the dropdown menu appear to the left or right of the button, respectively.

Example:

Dropstart:

<div class="dropdown dropstart">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
    <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>

• .dropstart: Makes the dropdown menu open to the left of the button.

Dropright:

<div class="dropdown dropright">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright button
  </button>
  <ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
    <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>

• .dropright: Makes the dropdown menu open to the right of the button.

3. Dropdown Dividers and Headers

You can add dividers and headers within the dropdown menu for better organization.

a. Divider

Example:

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated action</a></li>
</ul>

• <hr class="dropdown-divider">: Adds a divider between dropdown items.

b. Header

Example:

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

• <h6 class="dropdown-header">: Adds a header above dropdown items.

4. Dropdown Toggle Options

Dropdowns can be used in various contexts, such as within a navigation bar or as standalone buttons. You can also customize their behavior using additional options.

a. Dropdown in Navbar

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Separated action</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

• .nav-item.dropdown: Adds dropdown functionality to a navigation item.

Summary of Basic Dropdowns in Bootstrap

• Basic Structure: Use .dropdown, .dropdown-toggle, and .dropdown-menu to create a dropdown button and menu.
• Variants: Customize dropdown direction with .dropup, .dropstart, and .dropright.
• Dividers and Headers: Use .dropdown-divider and .dropdown-header for organization within the dropdown menu.
• Usage in Navbar: Integrate dropdowns into navigation bars using .nav-item.dropdown.