Module 33 : Dropdowns & Menus.
1. Dropdowns and menus are core UI components used to display a list of actions, navigation links, or contextual options in a compact and user way. In Bootstrap, dropdowns are built using a combination of HTML structure, CSS utility classes, and JavaScript behaviors.
2. Understand how dropdowns and menus work internally
Create basic and advanced dropdown menus
Customize dropdown behavior and styling
Implement accessibility- dropdowns
Debug common dropdown issues
Apply dropdowns in UI scenarios
3. Conceptual Foundation
3.1 What is a Dropdown?
A dropdown is a toggle-based UI component that shows or hides a list of menu items when triggered by a user action (click, hover, or keyboard event).
Why dropdowns exist:
Reduce UI clutter
related actions
Improve navigation efficiency
3.2 How Bootstrap Dropdowns Work
Bootstrap dropdowns rely on three layers:
HTML Structure – Defines the menu and trigger
CSS Classes – Controls layout, visibility, and animations
JavaScript (Popper.js) – Handles positioning and toggling logic
When a user clicks a dropdown button:
Bootstrap JS listens for the event
Toggles .show class
Popper.js calculates placement
Menu becomes visible
4. Basic Dropdown
4.1 Required Structure
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Select Option
</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</a></li>
</ul>
</div>
4.2 Explanation
.dropdown → Container
.dropdown-toggle → Trigger element
data-bs-toggle="dropdown" → Activates JS behavior
.dropdown-menu → Hidden menu
.dropdown-item → Individual menu options
Tip: Always ensure Bootstrap JS is loaded; otherwise, dropdowns will not function.
5. Dropdown
5.1 Dropdown Divider & Header
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Profile</h6></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
Explanation:
.dropdown-header → Non-clickable label
.dropdown-divider → Visual separation
5.2 Alignment Control
<ul class="dropdown-menu dropdown-menu-end">
Used for right-aligned menus (common in navbar profiles).
5.3 Drop Directions
<div class="dropup">...</div>
<div class="dropend">...</div>
<div class="dropstart">...</div>
Use Case: Helpful in constrained layouts like footers or sidebars.
6. Dropdowns in Navigation Menus
Example: Navbar Dropdown
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Web Design</a></li>
<li><a class="dropdown-item" href="#">SEO</a></li>
</ul>
</li>
Application: Used in websites like e-commerce, dashboards, and admin panels.
7. Accessibility
7.1 ARIA Roles
Bootstrap adds:
aria-expanded
aria-haspopup
7.2 Keyboard Support
Tab → Navigate
Enter / Space → Open
Esc → Close
Insight: Avoid removing default roles; it can break accessibility compliance (WCAG).
8. Custom Styling & Behavior
8.1 Custom Colors
.dropdown-menu {
background-color: #1e1e2f;
}
.dropdown-item {
color: #fff;
}
.dropdown-item:hover {
background-color: #343a40;
}
8.2 JavaScript Control
<script>
var dropdown = new bootstrap.Dropdown(document.querySelector('.dropdown-toggle'))
dropdown.show()
</script>
9. Exercises
Exercise 1
Create a dropdown with:
3 items
One divider
Custom button color
Exercise 2
Create a navbar dropdown aligned to the right with profile options.
Exercise 3
Create a dropdown controlled only via JavaScript (no data attributes).
10. Dynamic Dropdown Menu
Objective: Create a dropdown that loads menu items dynamically.
Steps:
Create empty .dropdown-menu
Use JavaScript array for items
Populate menu dynamically
<script>
const items = ['Dashboard', 'Orders', 'Settings'];
const menu = document.querySelector('.dropdown-menu');
items.forEach(item => {
let li = document.createElement('li');
li.innerHTML = `<a class="dropdown-item" href="#">${item}</a>`;
menu.appendChild(li);
});
</script>
Explanation:
Demonstrates DOM manipulation
Useful for dashboards and admin panels
11. Research
UI/UX Research Insights
Dropdowns reduce cognitive load when used correctly
Avoid more than 7 items (Hick's Law)
Frequently used actions should not be hidden
12. Common Mistakes & Debugging
Problem
Cause
Solution
Dropdown not opening
JS not loaded
Include bootstrap.bundle.js
Wrong position
Parent overflow hidden
Remove overflow or use body
Not accessible
Custom JS overrides
Follow Bootstrap defaults
13.Recommendations
Use dropdowns sparingly
Prefer buttons for critical actions
Always test keyboard navigation
Optimize for mobile tap targets
14. Summary
Dropdowns and menus are powerful UI components when implemented with:
Correct structure
Accessibility in mind
UX principles
