Skip to content
W3S101

Bootstrap Dropdowns

Bootstrap Dropdowns

Section titled “Bootstrap Dropdowns”

Basic Dropdown

Section titled “Basic Dropdown”

A dropdown is a toggleable menu that allows the user to select one value from a predefined list. Bootstrap 5 makes creating dropdowns straightforward using data attributes and pre-defined classes.

Dropdown Example


HTML
CSS
JavaScript


About Us
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Dropdown Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-3">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Example
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">HTML</a></li>
        <li><a class="dropdown-item" href="#">CSS</a></li>
        <li><a class="dropdown-item" href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

Example Explained

Section titled “Example Explained”

The .dropdown class wraps the dropdown’s trigger element and the dropdown menu.

To open the dropdown menu, use a button or a link with the data-bs-toggle="dropdown" attribute and an aria-expanded="false" attribute. The id on the button should match the aria-labelledby attribute on the <ul> for accessibility.

Bootstrap 5 automatically adds a caret arrow icon to buttons with the .dropdown-toggle class. No separate .caret class is needed.

Add the .dropdown-menu class to a <ul> element to build the dropdown menu. Dropdown items are typically <a> or <button> elements with the .dropdown-item class, nested within <li> tags.

Section titled “Dropdown Divider”

Use <hr class="dropdown-divider"> to separate groups of related menu items within a dropdown:

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="dropdown-menu">
    <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="#">Something else here</a></li>
  </ul>
</body>
</html>
Section titled “Dropdown Header”
Dropdown Header Example


Frameworks
HTML
CSS
JavaScript


User Options
Profile
Settings

Add headers to label sections of actions in any dropdown menu. Use <li><h6 class="dropdown-header">Dropdown header</h6></li> or simply <h6 class="dropdown-header">Dropdown header</h6> if not using <li> for headers.

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Frameworks</h6></li>
    <li><a class="dropdown-item" href="#">React</a></li>
    <li><a class="dropdown-item" href="#">Vue.js</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header">User Options</h6></li>
    <li><a class="dropdown-item" href="#">Profile</a></li>
  </ul>
</body>
</html>

Disable an Item

Section titled “Disable an Item”
Dropdown Disabled Example


HTML
CSS (disabled)
JavaScript


About Us

To disable an item in the dropdown menu, add the .disabled class to a .dropdown-item:

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">HTML</a></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">CSS (disabled)</a></li>
    <li><a class="dropdown-item" href="#">JavaScript</a></li>
  </ul>
</body>
</html>
Section titled “Dropdown Alignment and Position”
Dropdown Right (End) Example


HTML
CSS
JavaScript


About Us

To right-align the dropdown menu, add .dropdown-menu-end to the element with .dropdown-menu. For responsive alignment, you can use classes like .dropdown-menu-lg-end to align right only on large screens and up.

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Right-aligned menu
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><button class="dropdown-item" type="button">Action</button></li>
      <li><button class="dropdown-item" type="button">Another action</button></li>
    </ul>
  </div>
</body>
</html>
Dropup Example


HTML
CSS
JavaScript


About Us

If you want the dropdown menu to expand upwards instead of downwards, add the .dropup class to the parent .dropdown container.

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="dropdown dropup">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropup
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
  </div>
</body>
</html>
Section titled “Dropdown Accessibility”

To help improve accessibility, especially for screen reader users, ensure your dropdowns include appropriate ARIA attributes. Bootstrap 5 dropdowns are designed with accessibility in mind. Key attributes include:

  • aria-expanded on the toggle button, indicating whether the menu is open or closed.
  • aria-labelledby on the <ul> menu, referencing the id of the toggle button.
  • .dropdown-item elements should be focusable (e.g., <a> or <button>). Disabled items should have aria-disabled="true" and tabindex="-1".
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-3">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="accessibleDropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Tutorials
      </button>
      <ul class="dropdown-menu" aria-labelledby="accessibleDropdownMenuButton">
        <li><a class="dropdown-item" href="#">HTML</a></li>
        <li><a class="dropdown-item" href="#">CSS</a></li>
        <li><a class="dropdown-item" href="#">JavaScript</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">About Us</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

Complete Bootstrap Dropdown Reference

Section titled “Complete Bootstrap Dropdown Reference”

For a comprehensive reference of all dropdown options, methods, and events, please consult the official Bootstrap 5 documentation.