Mega Menu
Bootstrap Mega Menu
Bootstrap mega menu is a navigation component which enhance standard navbar features. Extended dropdown contains images and categorized links.
It may 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 mega menu use:
- Multi-category blog
- Multi-international company page
- Traveling page with destination images in the menu
See the following Bootstrap mega menu examples:
Mega menu dark version 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o 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="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa 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="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="fa fa-comments-o 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="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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
<!-- 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
<!-- Navbar -->
Mega menu blue version MDB Pro component
<!-- 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="fa fa-comments-o 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 15, 2017 / <i class="fa fa-comments-o 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o 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="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa 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="fa 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="fa 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="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa 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="fa 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o 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).jpg" 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="fa fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="fa fa-comments-o 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="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa 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;}
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue