Mega Menu
Bootstrap Mega Menu
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Bootstrap's mega menu is a navigation component which enhances the standard navbar features.Its extended dropdown contains images and categorized links.
It could contain a smaller version of your sitemap and images.
You can split it into categories and by doing so, enhance the UX of your website.
Examples of Bootstrap's mega menu use:
- A multi-category blog
- A multi-national company page
- A traveling page with destination images in the menu
See the following Bootstrap mega menu examples:
Mega menu dark version MDB Pro component
Megamenu is most often used if our navigation contains many links, or to aggregate huge number of information that can be extended with images. This component is most often used in navbar.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">
<!-- Navbar brand -->
<a class="navbar-brand text-uppercase" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<!-- Features -->
<li class="nav-item dropdown mega-dropdown active">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Features
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"
aria-labelledby="navbarDropdownMenuLink2">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Technology -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Technology</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"
aria-labelledby="navbarDropdownMenuLink3">
<div class="row">
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Lifestyle -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Lifestyle</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"
aria-labelledby="navbarDropdownMenuLink4">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 25
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!-- Navbar -->
Mega menu light version MDB Pro component
Light version of mega menu has navigation section to the most important categories and a handful of links to the latest information on the site.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light white">
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<!-- News -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">News
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu mega-menu v-1 z-depth-1 white py-5 px-3"
aria-labelledby="navbarDropdownMenuLink1">
<div class="row">
<div class="col-md-5 col-xl-3 sub-menu mb-xl-0 mb-5">
<ul class="list-unstyled">
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Laptops
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Phones
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Lifestyle
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Technology
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Design
</a>
</li>
</ul>
</div>
<div class="col-md-7 col-xl-4 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title pb-3 text-uppercase font-weight-bold">Featured</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 my-3">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(42).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit amet, consectetur
isum adipisicing elit.</a>
<p class="font-small text-uppercase text-muted">By <a class="p-0 m-sm" href="#!">Anna Doe</a> -
July 15, 2017</p>
</div>
<div class="col-md-12 col-xl-5 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title pb-3 text-uppercase font-weight-bold">Design</h6>
<div class="news-single">
<div class="row">
<div class="col-md-4">
<!--Image-->
<a href="#!" class="view overlay z-depth-1 p-0 my-3">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="col-md-8">
<a class="news-title smaller mt-md-2 pl-0" href="#!">Duis aute irure dolor reprehenderit in
voluptate.</a>
<p class="font-small text-uppercase text-muted">July 14, 2017</p>
</div>
</div>
</div>
<div class="news-single">
<div class="row">
<div class="col-md-4">
<!--Image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-3 mt-4">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="col-md-8">
<a class="news-title smaller mt-md-2 pl-0" href="#!">Tempore autem reiciendis iste nam
dicta.</a>
<p class="font-small text-uppercase text-muted">July 14, 2017</p>
</div>
</div>
</div>
<div class="news-single">
<div class="row">
<div class="col-md-4">
<!--Image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-3 mt-4">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(41).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="col-md-8">
<a class="news-title smaller mt-2 pl-0" href="#!">Eligendi dicta sunt amet, totam ea
recusandae.</a>
<p class="font-small text-uppercase text-muted">July 14, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Links -->
<!-- Links -->
<ul class="navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link" href="#!">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">
<i class="fab fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
<!-- Navbar -->
Mega menu blue version MDB Pro component
The blue version of megamenu offers a navigation section to the most important categories on the site and magazine sections arranged in three columns.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3"
aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent3">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<!-- News -->
<li class="nav-item dropdown mega-dropdown active">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink5" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Gadgets
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu mega-menu v-3 z-depth-1 primary-color-dark py-5 px-3"
aria-labelledby="navbarDropdownMenuLink5">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-5">
<ul class="list-unstyled">
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Technology
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Design
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Lifestyle
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Laptops
</a>
</li>
<li class="sub-title text-uppercase">
<a class="menu-item pl-1 mt-2" href="#!">
Phones
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(41).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<h4 class="mb-2">
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit amet.</a>
</h4>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<h4 class="mb-2">
<a class="news-title font-weight-bold pl-0" href="#!">Neque porro quisquam est.</a>
</h4>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 46
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-3">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(9).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<h4 class="mb-2">
<a class="news-title font-weight-bold pl-0" href="#!">Quis autem vel iure reprehit.</a>
</h4>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 15, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 35
</p>
</div>
</div>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!-- Navbar -->
Mega menu hoverable MDB Pro component
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">
<!-- Navbar brand -->
<a class="navbar-brand text-uppercase" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<!-- Features -->
<li class="nav-item dropdown mega-dropdown active">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Features
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"
aria-labelledby="navbarDropdownMenuLink2">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Technology -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Technology</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"
aria-labelledby="navbarDropdownMenuLink3">
<div class="row">
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Lifestyle -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Lifestyle</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"
aria-labelledby="navbarDropdownMenuLink4">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 25
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!-- Navbar -->
.dropdown:hover .dropdown-menu {display: block;}
Mega menu with multi-level menu MDB Pro component
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark pink darken-4">
<!-- Navbar brand -->
<a class="navbar-brand text-uppercase" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<!-- Features -->
<li class="nav-item dropdown mega-dropdown active">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Features
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"
aria-labelledby="navbarDropdownMenuLink2">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Technology -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Technology</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"
aria-labelledby="navbarDropdownMenuLink3">
<div class="row">
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Lifestyle -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Lifestyle</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"
aria-labelledby="navbarDropdownMenuLink4">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).webp"
class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>
<p class="font-small text-uppercase white-text">
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i
class="far fa-comments px-1" aria-hidden="true"></i> 25
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Multi-level dropdown -->
<li class="nav-item dropdown multi-level-dropdown">
<a href="#" id="menu" data-toggle="dropdown"
class="nav-link dropdown-toggle text-uppercase">Multi-level</a>
<ul class="dropdown-menu mt-2 rounded-0 pink darken-4 border-0 z-depth-1">
<li class="dropdown-item dropdown-submenu p-0">
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click Me! </a>
<ul class="dropdown-menu ml-2 rounded-0 pink darken-4 border-0 z-depth-1">
<li class="dropdown-item p-0">
<a href="#" class="text-white w-100">Hey</a>
</li>
<li class="dropdown-item p-0">
<a href="#" class="text-white w-100">Hi</a>
</li>
<li class="dropdown-item p-0">
<a href="#" class="text-white w-100">Hello</a>
</li>
</ul>
</li>
<li class="dropdown-item dropdown-submenu p-0">
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click Me Too! </a>
<ul class="dropdown-menu mr-2 rounded-0 pink darken-4 border-0 z-depth-1 r-100 l-auto">
<li class="dropdown-item p-0">
<a href="#" class="text-white w-100">How</a>
</li>
<li class="dropdown-item p-0">
<a href="#" class="text-white w-100">are</a>
</li>
<li class="dropdown-item p-0">
<a href="#" class="text-white w-100">you?</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!-- Navbar -->
$('.multi-level-dropdown .dropdown-submenu > a').on("click", function(e) {
var submenu = $(this);
$('.multi-level-dropdown .dropdown-submenu .dropdown-menu').removeClass('show');
submenu.next('.dropdown-menu').addClass('show');
e.stopPropagation();
});
$('.multi-level-dropdown .dropdown').on("hidden.bs.dropdown", function() {
// hide any open menus when parent closes
$('.multi-level-dropdown .dropdown-menu.show').removeClass('show');
});