How to create a responsive Bootstrap 5 mega menu with icons.
Final output:
1. Let’s start with the navbar with a dropdown from the official Bootstrap Navbar page.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>Output:
2. Replace the unordered list for dropdown-menu with a div.
Add a row with six columns inside it.
<div class="dropdown-menu">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>Since these will be links, add an anchor tag inside the columns. Add a div with display flex that will contain the icon on the left and text on the right.
<div class="col-sm-6">
<a href="#">
<div class="d-flex">
<div class="icon"></div>
<div class="text"></div>
</div>
</a>
</div>I am using Bootstrap icons. Add your icons and text in the respective divs.
<div class="col-sm-6">
<a href="#">
<div class="d-flex">
<div class="icon">
<i class="bi bi-tv"></i>
</div>
<div class="text">
<h5>Television</h5>
<div>Irure incididunt eu irure quis ipsum
occaecat dolor quis.</div>
</div>
</div>
</a>
</div>Increase the width of the dropdown-menu for larger screens.
@media only screen and (min-width: 992px) {
.dropdown-menu {
width: 55vw;
}
}Output:
3. Let’s style the mega menu.
Increase the icon size(fs-1), and add some horizontal(px-4) padding. Add a background color(bg-danger-subtle) and a border radius(rounded-3).
<div class="col-sm-6">
<a href="#">
<div class="d-flex">
<div class="icon px-3 bg-danger-subtle rounded-3 fs-1">
<i class="bi bi-tv"></i>
</div>
<div class="text">
...
</div>
</div>
</a>
</div>Change the anchor tag color and set the text-decoration to none.
.dropdown-menu a {
text-decoration: none;
color: #000000;
}Output:
4. Add some left padding to the text(ps-3).
Add padding for the outer div(d-flex). Since we’ll add a hover effect later, set a border-radius as well. Align the elements to the center(align-items-center).
<div class="col-sm-6">
<a href="#">
<div class="d-flex align-items-center py-3 px-1 rounded-3">
<div class="icon fs-1 px-3 bg-danger-subtle rounded-3">
<i class="bi bi-tv"></i>
</div>
<div class="text ps-3">
...
</div>
</div>
</a>
</div>Let’s add some padding for the parent drop-down menu too. Remove the border and add a box-shadow.
<div class="dropdown-menu px-3 rounded-3 border-0 shadow">
...
</div>Output:
5. Now, for that hover effect, let’s use the same background as the icon for the entire flexbox on hover.
.dropdown-menu .col-sm-6:nth-child(1) a:hover .d-flex {
background-color: var(--bs-warning-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(2) a:hover .d-flex {
background-color: var(--bs-danger-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(3) a:hover .d-flex {
background-color: var(--bs-success-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(4) a:hover .d-flex {
background-color: var(--bs-secondary-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(5) a:hover .d-flex {
background-color: var(--bs-tertiary-bg);
}
.dropdown-menu .col-sm-6:nth-child(6) a:hover .d-flex {
background-color: var(--bs-info-bg-subtle);
}Lastly, add a transition.
.dropdown-menu a .d-flex {
transition: all 0.5s;
}Bonus tip:
To open the mega menu on hover:
@media only screen and (min-width: 992px) {
.dropdown:hover .dropdown-menu {
display: flex;
}
.dropdown-menu.show {
display: flex;
}
}Output:
Video tutorial for Responsive Bootstrap 5 mega menu with icons:
Final Output Code for Responsive Bootstrap 5 mega menu:
HTML
<nav class="navbar navbar-expand-lg shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Categories
</a>
<div class="dropdown-menu px-3 rounded-3 border-0 shadow">
<div class="row">
<div class="col-sm-6">
<a href="#">
<div class="d-flex align-items-center py-3 px-1 rounded-3">
<div class="icon px-3 bg-warning-subtle rounded-3 fs-1">
<i class="bi bi-tv"></i>
</div>
<div class="text ps-3">
<h5>Television</h5>
<div>Irure incididunt eu irure quis ipsum
occaecat dolor quis.</div>
</div>
</div>
</a>
</div>
<div class="col-sm-6">
<a href="#">
<div class="d-flex align-items-center py-3 px-1 rounded-3">
<div class="icon px-3 bg-danger-subtle rounded-3 fs-1">
<i class="bi bi-headphones"></i>
</div>
<div class="text ps-3">
<h5>Headphones</h5>
<div>Irure incididunt eu irure quis ipsum
occaecat dolor quis.</div>
</div>
</div>
</a>
</div>
<div class="col-sm-6">
<a href="#">
<div class="d-flex align-items-center py-3 px-1 rounded-3">
<div class="icon px-3 bg-success-subtle rounded-3 fs-1">
<i class="bi bi-phone"></i>
</div>
<div class="text ps-3">
<h5>Smartphone</h5>
<div>Irure incididunt eu irure quis ipsum
occaecat dolor quis.</div>
</div>
</div>
</a>
</div>
<div class="col-sm-6">
<a href="#">
<div class="d-flex align-items-center py-3 px-1 rounded-3">
<div class="icon px-3 bg-secondary-subtle rounded-3 fs-1">
<i class="bi bi-laptop"></i>
</div>
<div class="text ps-3">
<h5>Laptop</h5>
<div>Irure incididunt eu irure quis ipsum
occaecat dolor quis.</div>
</div>
</div>
</a>
</div>
<div class="col-sm-6">
<a href="#">
<div class="d-flex align-items-center py-3 px-1 rounded-3">
<div class="icon px-3 bg-body-tertiary rounded-3 fs-1">
<i class="bi bi-smartwatch"></i>
</div>
<div class="text ps-3">
<h5>Smartwatch</h5>
<div>Irure incididunt eu irure quis ipsum
occaecat dolor quis.</div>
</div>
</div>
</a>
</div>
<div class="col-sm-6">
<a href="#">
<div class="d-flex align-items-center py-3 px-1 rounded-3">
<div class="icon px-3 bg-info-subtle rounded-3 fs-1">
<i class="bi bi-earbuds"></i>
</div>
<div class="text ps-3">
<h5>Earbuds</h5>
<div>Irure incididunt eu irure quis ipsum
occaecat dolor quis.</div>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>CSS
.dropdown-menu a {
text-decoration: none;
color: #000000;
}
.dropdown-menu a .d-flex {
transition: all 0.5s;
}
.dropdown-menu .col-sm-6:nth-child(1) a:hover .d-flex {
background-color: var(--bs-warning-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(2) a:hover .d-flex {
background-color: var(--bs-danger-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(3) a:hover .d-flex {
background-color: var(--bs-success-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(4) a:hover .d-flex {
background-color: var(--bs-secondary-bg-subtle);
}
.dropdown-menu .col-sm-6:nth-child(5) a:hover .d-flex {
background-color: var(--bs-tertiary-bg);
}
.dropdown-menu .col-sm-6:nth-child(6) a:hover .d-flex {
background-color: var(--bs-info-bg-subtle);
}
@media only screen and (min-width: 992px) {
.dropdown-menu {
width: 55vw;
}
.dropdown:hover .dropdown-menu {
display: flex;
}
.dropdown-menu.show {
display: flex;
}
}If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
