Mega Menu
Bootstrap Mega Menu - examples & tutorial
Responsive Mega Menu built with Bootstrap 5. Examples of dropdown on click and on hover. Templates with grid, images, links, lists and more.
To learn more read Navbar Docs.
Basic example
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
>
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
data-mdb-toggle="collapse"
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
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
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
>
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
data-mdb-toggle="collapse"
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
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
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
>
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
data-mdb-toggle="collapse"
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
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
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
>
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
data-mdb-toggle="collapse"
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
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://mdbootstrap.com/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-dark">
<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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
>
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
data-mdb-toggle="collapse"
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
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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div class="row border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div class="row border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div class="row border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
>
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
data-mdb-toggle="collapse"
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
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://mdbootstrap.com/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-dark">
<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://mdbootstrap.com/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-dark">
<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://mdbootstrap.com/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-dark">
<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 navbar-light bg-light"
>
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
data-mdb-toggle="collapse"
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
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://mdbootstrap.com/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"
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://mdbootstrap.com/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-dark">
<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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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-dark">
<div
class="row mb-4 border-bottom pb-2"
>
<div class="col-3">
<img
src="https://mdbootstrap.com/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt=""
/>
</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
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
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 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>
.dropdown-hover:hover>.dropdown-menu {
display: inline-block;
}
.dropdown-hover>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}