BootstrapHow-ToBeginner · 3 min read

How to Create Dropdown in Bootstrap: Simple Guide

To create a dropdown in Bootstrap, use a div with class dropdown containing a button with dropdown-toggle and a ul with class dropdown-menu for the menu items. Bootstrap's JavaScript handles the toggle behavior automatically when you include its scripts.

📐

Syntax

A Bootstrap dropdown requires a container with class dropdown. Inside it, a button or link with class dropdown-toggle triggers the menu. The menu itself is a ul or div with class dropdown-menu containing li or a elements as items.

dropdown: wrapper for dropdown
dropdown-toggle: button/link that toggles menu
dropdown-menu: container for menu items

html

<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>

Output

A button labeled 'Dropdown button' that when clicked shows a list of three clickable items: 'Action', 'Another action', and 'Something else here'.

💻

Example

This example shows a complete Bootstrap dropdown with a button that toggles a menu of three items. It uses Bootstrap 5 classes and requires Bootstrap's CSS and JS files included in the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Dropdown Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        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>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A blue button labeled 'Select Option' that when clicked shows a dropdown menu with three clickable options: 'Option 1', 'Option 2', and 'Option 3'.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap dropdowns include:

Not including Bootstrap's JavaScript file, so the dropdown won't toggle.
Missing the data-bs-toggle="dropdown" attribute on the toggle button.
Using incorrect classes like dropdown-toggle without the proper wrapper dropdown.
Not setting aria-expanded or other accessibility attributes.

Always ensure Bootstrap CSS and JS are loaded and the markup matches Bootstrap's required structure.

html

<!-- Wrong: Missing data-bs-toggle attribute -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item</a></li>
  </ul>
</div>

<!-- Right: Includes data-bs-toggle -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item</a></li>
  </ul>
</div>

📊

Quick Reference

Remember these key points for Bootstrap dropdowns:

Wrap dropdown in div.dropdown.
Use button.dropdown-toggle with data-bs-toggle="dropdown".
Place menu items inside ul.dropdown-menu.
Include Bootstrap CSS and JS files.
Use dropdown-item class for each menu link.

✅

Key Takeaways

Use a div with class dropdown to wrap the dropdown elements.

Add data-bs-toggle="dropdown" to the toggle button for Bootstrap's JS to handle clicks.

Menu items go inside a ul with class dropdown-menu and each item uses dropdown-item class.

Always include Bootstrap's CSS and JavaScript files for proper styling and functionality.

Check accessibility attributes like aria-expanded for better user experience.