Bootstrap Dropdowns

A dropdown shows a list of links or actions when the user clicks a button. It needs the Bootstrap JavaScript bundle (it includes Popper, which places the menu in the right position).

A basic dropdown

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

Click the button in the preview. Here we test it in real Chrome:

const menu = document.querySelector('.dropdown-menu');
console.log('menu visible before the click: ' + menu.classList.contains('show'));
document.getElementById('dd1').click();
await new Promise(r => setTimeout(r, 300));
console.log('menu visible after the click: ' + menu.classList.contains('show'));
console.log('aria-expanded: ' + document.getElementById('dd1').getAttribute('aria-expanded'));

Parts of a dropdown

Class or attribute	Meaning
.dropdown	The wrapper (position relative)
.dropdown-toggle	The button which opens the menu (adds the small arrow)
data-bs-toggle="dropdown"	Activates the JavaScript
.dropdown-menu	The list of items
.dropdown-item	One item (a link or a button)
.dropdown-divider, .dropdown-header	A line and a small heading in the menu

Divider, header, active and disabled items

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Account</button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Signed in as Anita</h6></li>
    <li><a class="dropdown-item active" href="#" aria-current="true">Profile</a></li>
    <li><a class="dropdown-item" href="#">Settings</a></li>
    <li><a class="dropdown-item disabled" aria-disabled="true">Billing (disabled)</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Log out</a></li>
  </ul>
</div>

Directions and alignment

• .dropup, .dropend and .dropstart open the menu above, to the right or to the left.
• .dropdown-menu-end aligns the menu to the right edge of the button. (In Bootstrap 4 it was .dropdown-menu-right.)
• For a responsive alignment use .dropdown-menu-lg-end and similar.

Split button

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle dropdown</span>
  </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>

Keep the menu open on click

By default the menu closes when you click an item or outside. Use data-bs-auto-close="outside" (or "inside", "false") to change it, for example for a menu with a form or checkboxes.

Dark dropdown

In 5.3 use data-bs-theme="dark" on the dropdown menu. The old class .dropdown-menu-dark is deprecated.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.