web
mobile
Edit these docs Rate these docs

Mega Menu

Bootstrap Mega Menu

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



        <!-- 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).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="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).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="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).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="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



        <!-- 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="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



        <!-- 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="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).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="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).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="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).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="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).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="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).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="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).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="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).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="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).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="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');
        });

      
Edit these docs Rate these docs

Getting started: download & setup


Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

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
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now