0
0
Bootsrapmarkup~5 mins

Dropdown button basics in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A dropdown button lets users pick one option from a list that appears when they click the button. It saves space and keeps the page clean.

When you want to offer multiple choices but only show one button at first.
When you need to group related actions or links under one button.
When space is limited and you want to keep the interface simple.
When you want to improve user experience by hiding less-used options.
When you want a neat menu that appears on click or tap.
Syntax
Bootsrap
<div class="dropdown">
  <button class="btn btn-primary 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>

The data-bs-toggle="dropdown" attribute makes the button open the menu.

Use aria-expanded for accessibility to show if the menu is open or closed.

Examples
A simple dropdown with two options and a secondary style button.
Bootsrap
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Choose 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>
  </ul>
</div>
A dropdown with a green button and three action links.
Bootsrap
<div class="dropdown">
  <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Actions
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Save</a></li>
    <li><a class="dropdown-item" href="#">Delete</a></li>
    <li><a class="dropdown-item" href="#">Edit</a></li>
  </ul>
</div>
Sample Program

This page shows a blue dropdown button labeled "Select Fruit". When clicked, it shows three fruit options. The button uses Bootstrap 5 styles and scripts for the dropdown to work.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Dropdown Button Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="p-4">
    <h1>Dropdown Button Basics</h1>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Select Fruit
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Apple</a></li>
        <li><a class="dropdown-item" href="#">Banana</a></li>
        <li><a class="dropdown-item" href="#">Cherry</a></li>
      </ul>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Make sure to include Bootstrap's CSS and JavaScript files for the dropdown to work.

Dropdown menus close automatically when you click outside or select an option.

Use semantic HTML and ARIA attributes for better accessibility.

Summary

Dropdown buttons help keep your page clean by hiding options until needed.

Bootstrap makes it easy to create dropdowns with simple classes and attributes.

Always include Bootstrap's JavaScript for the dropdown toggle to function.