Bootstrap 5 mega menus are wide multi-column dropdown panels. This page covers 4 mega menu patterns — basic multi-column, icons, hover trigger and centered brand layout — each with working copy-paste HTML.

Quick Setup

Mega menus require Bootstrap 5 JS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

ClassWhat It Does
.position-relativeRequired on navbar for full-width mega menu
.position-staticRequired on nav-item to break out of its bounds
.w-100Makes dropdown span full navbar width
.dropdown-menuThe mega menu panel
left: 0; right: 0Ensures full width positioning
.row.g-3Multi-column layout inside mega menu

1. Bootstrap 5 Basic Mega Menu

A full-width multi-column dropdown mega menu. Uses position-static on nav-item and w-100 on dropdown-menu.

2. Bootstrap 5 Mega Menu with Icons

Mega menu with Bootstrap Icons for each category. Visual navigation for large sites.

3. Bootstrap 5 Hover Mega Menu

Mega menu that opens on hover instead of click. Uses CSS hover with a slight delay.

4. Bootstrap 5 Centered Brand Mega Menu

Mega menu with centered brand logo and navigation links split evenly on both sides.

Frequently Asked Questions

Add position-static to the nav-item li element and position-relative to the parent navbar. Add w-100 to the dropdown-menu div and set left:0 right:0. Use Bootstrap's row and col inside the dropdown for multi-column layout.
Add CSS: .nav-item:hover .dropdown-menu { display: block; margin-top: 0; }. Remove data-bs-toggle='dropdown' from the link so it doesn't conflict with click behavior. Note: hover dropdowns are not accessible for keyboard-only users.
You need three things: position-relative on the navbar, position-static on the nav-item li, and w-100 on the dropdown-menu div. Without position-static on the nav-item, the dropdown positions relative to the nav link instead of the full navbar width.
Add an img element or a div with background-image inside a col in the mega menu dropdown. Use rounded for rounded images and img-fluid for responsive sizing. Featured product images work well in the last column of a mega menu.
On mobile the navbar collapses and mega menus stack vertically automatically. The position-static trick only applies on desktop. On mobile each dropdown-toggle opens a normal collapsed section. Test both states — sometimes you need to adjust padding on small screens.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Navbar with Dropdown

View examples →

Bootstrap 5 Navbar Example

View examples →

Bootstrap 5 Sidebar Navigation

View examples →