Bootstrap

Bootstrap JS Dropdown

Mastering Bootstrap JS Dropdowns: Create Dynamic Menus with Ease

Dropdowns are everywhere — in navigation bars, action menus, profile settings, and more. With Bootstrap’s JavaScript-powered dropdowns, you can add interactive menus that work beautifully on both desktop and mobile devices.

In this guide, we’ll walk through how to use the Bootstrap Dropdown component, including:

  • Markup with built-in behavior

  • JavaScript control

  • Right-aligned, dropdown-on-hover, and responsive tips

Step 1: Include Bootstrap

Use the official Bootstrap 5+ CDN:

html
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Bundle JS (includes Dropdown plugin) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Basic Dropdown Markup

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>

✅ No custom JavaScript needed — data-bs-toggle="dropdown" handles everything.

Aligning & Positioning

Right-aligned menu:

html
<ul class="dropdown-menu dropdown-menu-end">
...
</ul>

Dropup, Dropstart, Dropright:

html
<div class="dropup">...</div>
<div class="dropstart">...</div>
<div class="dropend">...</div>

JavaScript API: Programmatic Control

You can also control dropdowns with JavaScript using Bootstrap’s API.

HTML:

html
<button id="dropdownBtn" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
<ul class="dropdown-menu"> ... </ul>

JavaScript:

javascript
const dropdownEl = document.getElementById('dropdownBtn');
const dropdown = new bootstrap.Dropdown(dropdownEl);

// Show dropdown
dropdown.show();

// Hide dropdown
dropdown.hide();

// Toggle dropdown
dropdown.toggle();

Dropdown Events

Bootstrap provides custom events:

javascript
dropdownEl.addEventListener('show.bs.dropdown', () => {
console.log('Dropdown is about to show');
});

dropdownEl.addEventListener('hidden.bs.dropdown', () => {
console.log('Dropdown is now hidden');
});

Open Dropdown on Hover (Custom)

Bootstrap doesn’t support hover-out-of-the-box, but you can add it with a little JS:

javascript
const dropdown = document.querySelector('.dropdown');
const toggle = dropdown.querySelector('[data-bs-toggle="dropdown"]');
const instance = new bootstrap.Dropdown(toggle);

dropdown.addEventListener('mouseenter', () => instance.show());
dropdown.addEventListener('mouseleave', () => instance.hide());

✅ Great for desktop UIs — just test on touch devices too.

Accessibility Notes

  • Bootstrap dropdowns support keyboard navigation

  • aria-expanded and roles are handled automatically

  • Keep ul inside the same parent container as the toggle for proper positioning

✅ Use Cases

  • Navigation menus

  • User account menus

  • Sort & filter dropdowns

  • Action buttons on tables/cards

Final Thoughts

Bootstrap’s Dropdown component makes it simple to add responsive, interactive menus without relying on jQuery or external libraries. Whether you’re building a navbar or a user dashboard, dropdowns give your UI flexibility and control.

Helpful Links

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *