Mega Menu
Bootstrap Mega Menu - free examples, templates & tutorial
Responsive Mega Menu built with Bootstrap 5. Examples of megamenu dropdown on click or hover. Templates with grid, images, links, lists, vertical menu and more.
To learn more read Navbar Docs.
Basic example
A basic dropdown mega menu inside of a Bootstrap navbar. You can use the same dropdown wrapper to embed your mega menu inside of a Side Navigation bar (also known as Sidebar, Offcanvas, Drawer, or simply Sidenav).
If you need to extend the depth of your menu by adding submenus to some of the items you could consider using a nested dropdown. Keep in mind that Mega Menu is already a complex component, so in order to keep your design clear and concise you probably shouldn't complicate it even further. It may be worth to consider re-organizing your page structure or using a search bar instead.
A standard practice is to use
hamburger menu
for mobile devices.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExample1" aria-controls="navbarExample1" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample1">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
<a href="" class="list-group-item list-group-item-action">Dolor sit</a>
<a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
<a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action">Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Iste quaerato</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Est iure</a>
<a href="" class="list-group-item list-group-item-action">Praesentium</a>
<a href="" class="list-group-item list-group-item-action">Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
Bolded headings
Check out different typography options to make the heading inside your multimenu stand out.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExample2" aria-controls="navbarExample2" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample2">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Lorem ipsum
</p>
<a href="" class="list-group-item list-group-item-action">Dolor sit</a>
<a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action">Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Iste quaerato
</p>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Est iure</a>
<a href="" class="list-group-item list-group-item-action">Praesentium</a>
<a href="" class="list-group-item list-group-item-action">Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Cras justo odio
</p>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
Punctation
Use list group or list typography to customize the lists inside your mega menu.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExample3" aria-controls="navbarExample3" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample3">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Lorem ipsum
</p>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Dolor sit</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Iste quaerato
</p>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Est iure</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Praesentium</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Cras justo odio
</p>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
Mixed content
By leveraging images, videos, product cards, weather cards, testimonial sliders, reviews, and any other element you can make your mega menu even more comprehensive. Standard flexbox utilities and Bootstrap grid should be enough to customize your menu to the highest extent.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExample4" aria-controls="navbarExample4" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample4">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-xl-3 mb-3 mb-xl-0">
<div class="pt-2">
<p class="text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="
background-color: rgba(
251,
251,
251,
0.15
);
"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-body">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Odit, iste aliquid. Sed id nihil
magni, sint vero provident esse
numquam perferendis ducimus dicta
adipisci iusto nam temporibus modi
animi laboriosam?
</p>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-xl-0">
<div class="pt-2">
<p class="text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded" alt="Palm Springs" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Iste quaerato
</p>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Est iure</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Praesentium</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Laboriosam</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Dolor sit</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Adipiscing elit</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Cras justo odio
</p>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Saepe</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Vel alias</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cum dolores</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Provident dolor</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
Media list
Creating a list of news articles in your mega menu, can be easily achieved by utilizing media objects.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExample5" aria-controls="navbarExample5" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample5">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-12 col-lg-4 mb-4 mb-lg-0">
<p class="text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">
Iste quaerato
</p>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">
Cras justo odio
</p>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
Big news
Adding a newsfeed preview, at the top of the mega-menu dropdown, is a standard practice in blog templates.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExample6" aria-controls="navbarExample6" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample6">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-4 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="
background-color: rgba(
251,
251,
251,
0.15
);
"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-body">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit,
iste aliquid. Sed id nihil magni,
sint vero provident esse numquam
perferendis ducimus dicta adipisci
iusto nam temporibus modi animi
laboriosam?
</p>
</a>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">
Iste quaerato
</p>
<div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/011.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="
background-color: rgba(
251,
251,
251,
0.15
);
"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-danger"><i class="fas fa-chart-pie pe-1"></i>Business</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-body">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit,
iste aliquid. Sed id nihil magni,
sint vero provident esse numquam
perferendis ducimus dicta adipisci
iusto nam temporibus modi animi
laboriosam?
</p>
</a>
</div>
<div class="col-md-4">
<p class="text-uppercase font-weight-bold">
Cras justo odio
</p>
<div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/018.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="
background-color: rgba(
251,
251,
251,
0.15
);
"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-warning"><i class="fas fa-code pe-1"></i>Technology</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-body">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit,
iste aliquid. Sed id nihil magni,
sint vero provident esse numquam
perferendis ducimus dicta adipisci
iusto nam temporibus modi animi
laboriosam?
</p>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
Mixed media
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExample7" aria-controls="navbarExample7" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExample7">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-12 col-xl-6 mb-4 col-lg-0">
<p
class="text-uppercase font-weight-bold text-center d-flex justify-content-center align-items-center">
Iste quaerato
<span class="badge bg-danger shadow-1-strong ms-2">News of the day</span>
</p>
<div class="row gx-4">
<div class="col-md-6 mb-4">
<div class="bg-image hover-overlay ripple rounded shadow-2-strong"
data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/080.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="
background-color: rgba(
251,
251,
251,
0.15
);
"></div>
</a>
</div>
</div>
<div class="col-md-6 mb-3">
<p class="text-muted">
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Facilis consequatur eligendi
quisquam doloremque vero ex
debitis veritatis placeat unde
animi laborum sapiente illo
possimus, commodi dignissimos
obcaecati illum maiores corporis.
</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">
Read more
</button>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<div class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="
background-color: rgba(
251,
251,
251,
0.15
);
"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-body">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit,
iste aliquid. Sed id nihil magni,
sint vero provident esse numquam
perferendis ducimus dicta adipisci
iusto nam temporibus modi animi
laboriosam?
</p>
</a>
</div>
<div class="col-md-6 col-xl-3">
<p class="text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-body">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit
amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
Dropdown on hover
For desktop devices, you can also enable displaying mega menu on hover.
<nav class="navbar navbar-expand-lg bg-body-tertiary" style="padding: 0px;">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
data-mdb-target="#navbarExampleOnHover" aria-controls="navbarExampleOnHover" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarExampleOnHover">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown dropdown-hover position-static">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
<a href="" class="list-group-item list-group-item-action">Dolor sit</a>
<a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
<a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action">Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Iste quaerato</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Est iure</a>
<a href="" class="list-group-item list-group-item-action">Praesentium</a>
<a href="" class="list-group-item list-group-item-action">Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
.nav-item {
padding: 0.5rem 0xp;
}
.dropdown-hover:hover>.dropdown-menu {
display: inline-block;
}
.dropdown-hover>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}