Lesson 15: Dropdowns & Mega Menus in Bootstrap

—

by

admin
in
Module 1: Introduction to Bootstrap 2025

Module 2: Bootstrap Grid System & Responsive Layouts

Module 3: Bootstrap Components & UI Elements

Module 4: Navigation & Menus in Bootstrap

Module 5: Advanced Bootstrap Features

Module 6: Forms, Authentication & Data Handling

Module 7: Bootstrap & JavaScript Integration

Module 8: Bootstrap with React, Vue, and Angular

📌 Objective: Learn how to create interactive dropdown menus and mega menus in Bootstrap for improved navigation.

🔹 1. Introduction to Dropdowns & Mega Menus

Dropdowns and mega menus help organize complex navigation by grouping multiple links together.

💡 Why Use Bootstrap Dropdowns & Mega Menus?
✔️ User-friendly navigation for websites with multiple sections.
✔️ Expandable menus that display subcategories.
✔️ Customizable layouts for better UI/UX.

🔹 2. Creating a Basic Dropdown Menu

A dropdown menu allows users to reveal additional options when clicking a button or link.

✅ Example: Simple Dropdown

html
<div class="container mt-3">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Select an 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>

🔹 What happens?

  • Clicking the button reveals a dropdown list with three options.

🔹 3. Dropdown Inside Navbar

Dropdowns are commonly used in navigation bars.

✅ Example: Navbar with a Dropdown

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 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>
<li><a class="dropdown-item" href="#">Marketing</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

🔹 What happens?

  • The “Services” dropdown appears inside the navbar.

🔹 4. Adding Dropdown Variants

You can change dropdown behavior using alignment and positioning classes.

1️⃣ Right-Aligned Dropdown (.dropdown-menu-end)

✅ Example: Right-Aligned Dropdown

html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Right Aligned
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</div>

🔹 What happens?

  • The dropdown aligns to the right.

2️⃣ Split Button Dropdown

✅ Example: Split Button Dropdown

html
<div class="btn-group">
<button class="btn btn-success">Main Action</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Sub Option 1</a></li>
<li><a class="dropdown-item" href="#">Sub Option 2</a></li>
</ul>
</div>

🔹 What happens?

  • The main button triggers an action, and the dropdown button expands options.

🔹 5. Creating a Mega Menu

Mega menus display multiple columns of links, great for e-commerce and dashboards.

✅ Example: Mega Menu

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="megaMenu" role="button" data-bs-toggle="dropdown">
Mega Menu
</a>
<div class="dropdown-menu p-4">
<div class="row">
<div class="col-md-4">
<h6>Category 1</h6>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
<div class="col-md-4">
<h6>Category 2</h6>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
</div>
<div class="col-md-4">
<h6>Category 3</h6>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

🔹 What happens?

  • The dropdown expands into a multi-column layout.

🔹 6. Adding Icons to Dropdowns

Use Bootstrap Icons or FontAwesome inside dropdown items.

✅ Example: Dropdown with Icons

html
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="bi bi-house"></i> Home</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-person"></i> Profile</a></li>
</ul>

🔹 What happens?

  • Each menu item has an icon next to it.

📝 Lesson Recap Quiz

🎯 Test your knowledge of Bootstrap Dropdowns & Mega Menus.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What Bootstrap class is used to create a dropdown menu?
a) .menu-dropdown
b) .dropdown-menu
c) .nav-dropdown
d) .dropdown-list

✅ Correct Answer: b) .dropdown-menu

2️⃣ Which class aligns a dropdown menu to the right?
a) .dropdown-right
b) .align-end
c) .dropdown-menu-end
d) .dropdown-align-right

✅ Correct Answer: c) .dropdown-menu-end

3️⃣ How do you create a multi-column mega menu?
a) Use .mega-dropdown
b) Use .dropdown-menu inside a Bootstrap .row
c) Use .multi-dropdown
d) Use .navbar-mega

✅ Correct Answer: b) Use .dropdown-menu inside a Bootstrap .row

📌 True or False

4️⃣ Dropdowns require Bootstrap’s JavaScript to function.
✅ Answer: True

5️⃣ Mega menus are only possible using external CSS.
✅ Answer: False

🎯 Practical Challenge

✅ Create a fully responsive mega menu with:

  • A multi-column layout
  • Icons inside dropdown links
  • A search box inside the dropdown
    ✅ Post your solution in the discussion forum for feedback!

🎓 Lesson Summary

✅ Dropdowns (.dropdown-menu) expand on button click.
✅ .dropdown-menu-end aligns dropdowns to the right.
✅ Mega menus use .dropdown-menu and Bootstrap’s grid system.
✅ Icons & additional elements can be added inside dropdowns.

Comments

Leave a Reply

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