Bootstrap - Bootstrap Dropdown Component

The Bootstrap Dropdown Component is a user-interface component used to display a list of options or actions when a user clicks or interacts with a button or link. Dropdowns are useful when several choices need to be presented without occupying permanent space on the webpage. Common examples include navigation menus, account menus, settings menus, language selectors, and action lists.

1. Basic Dropdown Structure

A Bootstrap dropdown generally consists of three important parts: a dropdown container, a dropdown toggle, and a dropdown menu. The container usually uses the .dropdown class. The element that opens the menu uses .dropdown-toggle, while the list of options is placed inside an element with .dropdown-menu.

A basic example is:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" 
          type="button" 
          data-bs-toggle="dropdown">
    Select Option
  </button>

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

When the button is clicked, Bootstrap displays the dropdown menu containing the available options.

2. Dropdown Toggle

The toggle is the element that controls the visibility of the dropdown menu. Bootstrap commonly uses a button for this purpose.

The important attribute is:

data-bs-toggle="dropdown"

This tells Bootstrap that the element should control a dropdown.

The .dropdown-toggle class adds Bootstrap's visual styling and the small downward indicator associated with a dropdown.

For example:

<button class="btn btn-secondary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown">
  Categories
</button>

The button displays the text "Categories", and clicking it opens the associated menu.

3. Dropdown Menu Items

Individual choices inside a dropdown are commonly created using the .dropdown-item class.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Home</a></li>
  <li><a class="dropdown-item" href="#">Products</a></li>
  <li><a class="dropdown-item" href="#">Services</a></li>
</ul>

The .dropdown-item class provides appropriate spacing, typography, hover effects, and interaction styling.

Dropdown items can be links, buttons, or other suitable interactive elements depending on the purpose of the interface.

4. Dropdown Headers

A dropdown can contain a heading to organize related options. Bootstrap provides the .dropdown-header class for this purpose.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">User Account</h6></li>
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><a class="dropdown-item" href="#">Settings</a></li>
</ul>

The header is not intended to be an interactive option. It helps users understand the category of the items that follow it.

5. Dropdown Dividers

When a dropdown contains groups of unrelated actions, a divider can visually separate them.

Bootstrap uses the .dropdown-divider class:

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><a class="dropdown-item" href="#">Settings</a></li>

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

  <li><a class="dropdown-item" href="#">Logout</a></li>
</ul>

The divider makes the structure easier to understand, particularly when destructive or account-related actions are separated from general navigation options.

6. Active and Disabled Items

Bootstrap allows individual dropdown items to be displayed as active or disabled.

An active item can be created using the .active class:

<a class="dropdown-item active" href="#">Current Page</a>

A disabled item can use the .disabled class:

<a class="dropdown-item disabled" href="#">Unavailable Option</a>

Disabled items communicate that an option exists but cannot currently be selected.

7. Dropdown Placement

Bootstrap supports different dropdown directions. A standard dropdown opens below its toggle, but menus can also be positioned above, to the left, or to the right.

For example, .dropup causes the menu to open upward:

<div class="dropup">
  <button class="btn btn-primary dropdown-toggle"
          type="button"
          data-bs-toggle="dropdown">
    Options
  </button>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
  </ul>
</div>

Other positioning classes include .dropend and .dropstart, which can be useful when there is limited vertical space.

8. Dropdowns with Buttons

Dropdowns can be combined with Bootstrap buttons to create action menus.

<div class="dropdown">
  <button class="btn btn-success dropdown-toggle"
          type="button"
          data-bs-toggle="dropdown">
    Actions
  </button>

  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Edit</button></li>
    <li><button class="dropdown-item" type="button">Copy</button></li>
    <li><button class="dropdown-item" type="button">Delete</button></li>
  </ul>
</div>

This approach is useful when the choices perform actions rather than navigate to different webpages.

9. Split Dropdown Buttons

Bootstrap also supports split buttons, where the main button performs one action and a separate button opens the dropdown.

<div class="btn-group">
  <button type="button" class="btn btn-primary">
    Save
  </button>

  <button type="button"
          class="btn btn-primary dropdown-toggle dropdown-toggle-split"
          data-bs-toggle="dropdown">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Save As</a></li>
    <li><a class="dropdown-item" href="#">Save Copy</a></li>
  </ul>
</div>

This design is useful when there is a primary action that users are likely to perform frequently along with additional related actions.

10. Dark Dropdown Menus

Bootstrap provides support for dark dropdown menus. The .dropdown-menu-dark class can be used to apply a dark appearance.

<ul class="dropdown-menu dropdown-menu-dark">
  <li><a class="dropdown-item" href="#">Dashboard</a></li>
  <li><a class="dropdown-item" href="#">Settings</a></li>
  <li><a class="dropdown-item" href="#">Logout</a></li>
</ul>

This can be useful when the dropdown needs to match a dark navigation bar or another dark interface.

11. Responsive Dropdown Behavior

Dropdowns can be combined with responsive Bootstrap utilities so that their placement or appearance changes depending on the screen size.

For example, a navigation interface may need different dropdown behavior on mobile and desktop screens. Bootstrap's utility classes and responsive design system make it possible to adjust the surrounding layout without creating completely separate components.

This is particularly useful for websites that need to work consistently on smartphones, tablets, and desktop computers.

12. Dropdown Accessibility

Accessibility is an important consideration when implementing dropdown menus. Users should be able to understand the purpose of the toggle and navigate the available options using a keyboard.

Bootstrap's dropdown JavaScript functionality supports keyboard interaction and manages several accessibility-related behaviors. Developers should also use meaningful button labels and appropriate HTML elements.

For example:

<button type="button"
        class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown"
        aria-expanded="false">
  Account
</button>

The aria-expanded attribute communicates whether the dropdown is currently open or closed.

13. JavaScript Requirement

Bootstrap dropdowns rely on Bootstrap's JavaScript functionality. Therefore, simply including the Bootstrap CSS file is not sufficient for an interactive dropdown.

A Bootstrap bundle containing the required JavaScript functionality should be included in the webpage.

For example:

<script src="bootstrap.bundle.min.js"></script>

The bundle includes the required positioning functionality used by Bootstrap dropdowns.

14. Practical Uses of Dropdowns

Dropdowns are commonly used in many types of websites and applications. A navigation bar may use a dropdown to display multiple pages under one category. An administration dashboard may use one for account actions. An e-commerce website may provide sorting and filtering choices through dropdown menus. A form may use a dropdown to allow users to select a category, country, or other predefined option.

Dropdowns should be used when the number of choices is manageable and displaying all choices permanently would unnecessarily occupy space.

Conclusion

The Bootstrap Dropdown Component provides a structured way to present hidden menus containing navigation links or actions. Its main building blocks are .dropdown, .dropdown-toggle, .dropdown-menu, and .dropdown-item. Bootstrap also provides features such as headers, dividers, disabled items, active items, different menu directions, split buttons, dark menus, and keyboard accessibility support. By combining these features with Bootstrap's JavaScript functionality, developers can create consistent and responsive dropdown interfaces without having to build the component's basic styling and behavior from scratch.