Rate this docs

Vue Mega Menu

Vue Mega Menu - Bootstrap 4 & Material Design

Vue 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 Vue mega menu use:

  • Multi-category blog
  • Multi-international company page
  • Traveling page with destination images in the menu

See the following Vue mega menu examples:


Mega menu dark version MDB Pro component



<template>
  <mdb-container>
    <!--Navbar-->
    <mdb-navbar class="mt-2 special-color-dark" dark>
      <!-- Navbar brand -->
      <mdb-navbar-brand class="text-white text-uppercase">
        Navbar
      </mdb-navbar-brand>
      <mdb-navbar-toggler>
        <mdb-navbar-nav left>
          <mdb-dropdown tag="li" megaMenu class="nav-item">
            <mdb-dropdown-toggle slot="toggle" class="text-uppercase" tag="a" transparent navLink waves-fixed>Features</mdb-dropdown-toggle>
            <mdb-dropdown-menu class="mega-menu v-2 z-depth-1 special-color py-5 px-3">
              <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 d-inline-block"></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>
            </mdb-dropdown-menu>
          </mdb-dropdown>
          <mdb-dropdown tag="li" megaMenu class="nav-item">
            <mdb-dropdown-toggle slot="toggle" class="text-uppercase" tag="a" transparent navLink waves-fixed>Technology</mdb-dropdown-toggle>
            <mdb-dropdown-menu class="mega-menu v-2 z-depth-1 special-color py-5 px-3">
              <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>
            </mdb-dropdown-menu>
          </mdb-dropdown>
          <mdb-dropdown tag="li" megaMenu class="nav-item">
            <mdb-dropdown-toggle slot="toggle" class="text-uppercase" tag="a" transparent navLink waves-fixed>Lifestyle</mdb-dropdown-toggle>
            <mdb-dropdown-menu class="mega-menu v-2 z-depth-1 special-color py-5 px-3">
              <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>
            </mdb-dropdown-menu>
          </mdb-dropdown>
        </mdb-navbar-nav>
        <form>
          <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
        </form>
      </mdb-navbar-toggler>
    </mdb-navbar>
    <!--/.Navbar-->
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbIcon, mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem } from 'mdbvue';

export default {
  name: 'MegaMenuPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbIcon,
    mdbNavbar,
    mdbNavbarBrand,
    mdbNavbarToggler,
    mdbNavbarNav,
    mdbNavItem,
    mdbInput,
    mdbDropdown,
    mdbDropdownToggle,
    mdbDropdownMenu,
    mdbDropdownItem 
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

      

Mega menu light version MDB Pro component



<template>
  <mdb-container>
    <!--Navbar-->
    <mdb-navbar class="mt-2 white">
      <mdb-navbar-toggler>
        <mdb-navbar-nav left>
          <mdb-dropdown tag="li" megaMenu class="nav-item">
            <mdb-dropdown-toggle slot="toggle" tag="a" transparent navLink waves-fixed>News</mdb-dropdown-toggle>
            <mdb-dropdown-menu class="mega-menu v-1 z-depth-1 white py-5 px-3">
              <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>
            </mdb-dropdown-menu>
          </mdb-dropdown>
        </mdb-navbar-nav>
        <!-- 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 -->
      </mdb-navbar-toggler>
    </mdb-navbar>
    <!--/.Navbar-->
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbIcon, mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem } from 'mdbvue';

export default {
  name: 'MegaMenuPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbIcon,
    mdbNavbar,
    mdbNavbarBrand,
    mdbNavbarToggler,
    mdbNavbarNav,
    mdbNavItem,
    mdbInput,
    mdbDropdown,
    mdbDropdownToggle,
    mdbDropdownMenu,
    mdbDropdownItem 
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>        

      

Mega menu blue version MDB Pro component



<template>
  <mdb-container>
    <!--Navbar-->
    <mdb-navbar class="mt-2" color="primary" dark>
      <mdb-navbar-toggler>
        <mdb-navbar-nav left>
          <mdb-dropdown tag="li" megaMenu class="nav-item">
            <mdb-dropdown-toggle slot="toggle" tag="a" active transparent navLink waves-fixed>Gadgets</mdb-dropdown-toggle>
            <mdb-dropdown-menu class="mega-menu v-3 z-depth-1 primary-color-dark py-5 px-3">
              <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>
            </mdb-dropdown-menu>
          </mdb-dropdown>
        </mdb-navbar-nav>
        <form>
          <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
        </form>
      </mdb-navbar-toggler>
    </mdb-navbar>
    <!--/.Navbar-->
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbIcon, mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem } from 'mdbvue';

export default {
  name: 'MegaMenuPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbIcon,
    mdbNavbar,
    mdbNavbarBrand,
    mdbNavbarToggler,
    mdbNavbarNav,
    mdbNavItem,
    mdbInput,
    mdbDropdown,
    mdbDropdownToggle,
    mdbDropdownMenu,
    mdbDropdownItem 
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

      

Mega Menu - API

In this section you will find advanced information about the Mega Menu component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


        import { mdbContainer, mdbRow, mdbIcon, mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem } from 'mdbvue';