Angular Bootstrap Mega Menu


Mega menu dark version MDB Pro component

Angular Bootstrap mega menu is a navigation component which enhance standard navbar features. Extended dropdown contains images and categorized links.

It may contain a smaller version of your sitemap and images.

You can split it into categories and by doing so, enhance the UX of your website.

Examples of Angular Bootstrap mega menu use:

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

See the following Angular Bootstrap mega menu examples:


                      <!--Navbar-->
<mdb-navbar #nav SideClass="navbar navbar-expand-lg navbar-dark special-color-dark">

    <!-- Navbar brand -->
    <mdb-navbar-brand>
      <a class="navbar-brand" href="#">Navbar</a>
    </mdb-navbar-brand>
  
    <links>
      <!-- Links -->
      <ul class="navbar-nav mr-auto">
  
        <li class="nav-item dropdown mega-dropdown active" mdbDropdown>
          <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret"
            aria-haspopup="true" aria-expanded="false">Features</a>
          <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
            <div class="row mx-md-4 mx-1">
              <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
                <ul class="caret-style pl-0">
                  <li class="">
                    <a class="menu-item mb-0" href="">Lorem ipsum dolor sit amet</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Consectetur adipiscing elit</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Sed do eiusmod tempor incididunt</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Ut labore et dolore magna</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Ut enim ad minim veniam</a>
                  </li>
                </ul>
              </div>
              <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
                <ul class="caret-style pl-0">
                  <li class="">
                    <a class="menu-item" href="">Quis nostrud exercitation</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Duis aute irure dolor in</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Laboris nisi ut aliquip ex ea commodo consequat</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Reprehenderit in voluptate</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Esse cillum dolore eu fugiat nulla pariatur</a>
                  </li>
                </ul>
              </div>
              <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
                <ul class="caret-style pl-0">
                  <li class="">
                    <a class="menu-item" href="">Excepteur sint occaecat</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Sunt in culpa qui officia</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Sed ut perspiciatis unde omnis iste natus error</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Mollit anim id est laborum</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Accusantium doloremque laudantium</a>
                  </li>
                </ul>
              </div>
              <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
                <ul class="caret-style pl-0">
                  <li class="">
                    <a class="menu-item" href="">Totam rem aperiam eaque</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Beatae vitae dicta sun</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Quae ab illo inventore veritatis et quasi architecto</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Nemo enim ipsam voluptatem</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Neque porro quisquam est</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item dropdown mega-dropdown" mdbDropdown>
          <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true" aria-expanded="false">Technology</a>
          <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
            <div class="row mx-md-4 mx-1">
              <div class="col-md-12 col-lg-4 sub-menu my-lg-5 mt-5 mb-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
                <!--Featured image-->
                <div class="view overlay mb-3 z-depth-1">
                  <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(37).jpg" class="img-fluid" alt="First sample image">
                  <div class="mask rgba-white-slight flex-center">
                    <p></p>
                  </div>
                </div>
                <h4 class="mb-2">
                  <a class="news-title-2 pl-0" href="">Lorem ipsum dolor sit</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-lg-4 sub-menu my-lg-5 my-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
                <ul class="caret-style pl-0">
                  <li class="">
                    <a class="menu-item" href="">Quis nostrud exercitation</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Duis aute irure dolor in</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Laboris nisi ut aliquip ex ea commodo consequat</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Reprehenderit in voluptate</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Esse cillum dolore eu fugiat nulla pariatur</a>
                  </li>
                </ul>
              </div>
              <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
                <ul class="caret-style pl-0">
                  <li class="">
                    <a class="menu-item" href="">Excepteur sint occaecat</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Sunt in culpa qui officia</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Sed ut perspiciatis unde omnis iste natus error</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Mollit anim id est laborum</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Accusantium doloremque laudantium</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item dropdown mega-dropdown" mdbDropdown>
          <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret"
            aria-haspopup="true" aria-expanded="false">Lifestyle</a>
          <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
            <div class="row mx-md-4 mx-1">
              <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
                <ul class="caret-style pl-0">
                  <li class="">
                    <a class="menu-item mb-0" href="">Lorem ipsum dolor sit amet</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Consectetur adipiscing elit</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Sed do eiusmod tempor incididunt</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Ut labore et dolore magna</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Ut enim ad minim veniam</a>
                  </li>
                </ul>
              </div>
              <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
                <!--Featured image-->
                <div class="view overlay mb-3 z-depth-1">
                  <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 flex-center">
                    <p></p>
                  </div>
                </div>
                <h4 class="mb-2">
                  <a class="news-title-2 pl-0" href="">Lorem ipsum dolor sit</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 my-xl-5 mt-4 mb-4">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
                <!--Featured image-->
                <div class="view overlay mb-3 z-depth-1">
                  <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 flex-center">
                    <p></p>
                  </div>
                </div>
                <h4 class="mb-2">
                  <a class="news-title-2 pl-0" href="">Ut labore et dolore magna</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> 25</p>
              </div>
              <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">
                <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
                <ul class="caret-style pl-0">
                  <li class="">
                    <a class="menu-item" href="">Totam rem aperiam eaque</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Beatae vitae dicta sun</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Quae ab illo inventore veritatis et quasi architecto</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Nemo enim ipsam voluptatem</a>
                  </li>
                  <li class="">
                    <a class="menu-item" href="">Neque porro quisquam est</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
  
      </ul>
      <!-- Links -->
  
  
      <!-- Search form -->
      <form class="form-inline waves-light" mdbWavesEffect>
        <div class="md-form mt-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
        </div>
      </form>
    </links>
    <!-- Collapsible content -->
  
  </mdb-navbar>
  <!--/.Navbar-->
                    

                        import { Component, HostListener, ViewChild, Renderer2, AfterViewInit, ElementRef } from '@angular/core';
import { NavbarComponent } from 'ng-uikit-pro-standard';

@Component({
  selector: 'mega-menu',
  templateUrl: './mega-menu.component.html',
  styleUrls: ['./mega-menu.component.scss'],
})
export class MegaMenuComponent implements AfterViewInit {
  @ViewChild('nav') nav: NavbarComponent;
  breakpoint = 992;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  transformDropdowns() {
    const dropdownMenu = Array.from(this.el.nativeElement.querySelectorAll('.dropdown-menu'));
    const navHeight = this.nav.navbar.nativeElement.clientHeight + 'px';
    dropdownMenu.forEach((dropdown) => {
    this.renderer.setStyle(dropdown, 'transform', `translateY(${navHeight})`);
    });
  }

  @HostListener('click', ['$event'])
  onClick(event) {
    const toggler = this.el.nativeElement.querySelector('.navbar-toggler');
    const togglerIcon = this.el.nativeElement.querySelector('.navbar-toggler-icon');
    if (event.target === toggler || event.target === togglerIcon) {
      setTimeout(() => {
        this.transformDropdowns();
      }, 351);
    }
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerWidth > this.breakpoint) {
      this.transformDropdowns();
    }
  }

  ngAfterViewInit() {
    this.transformDropdowns();
  }

}

                      

                        .navbar .mega-dropdown {
                            position: static !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu {
                            width: 100%;
                            border: none;
                            border-radius: 0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 a {
                            padding: 10px 0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 a.news-title-2 {
                            font-weight: 500;
                            font-size: 1.1rem;
                            line-height: 1.5;
                            -webkit-transition: .2s;
                            transition: .2s;
                            color: #fff !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 a.news-title-2:hover {
                            color: #d0d6e2 !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul {
                            list-style: none;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul.caret-style li {
                            -webkit-transition: .3s;
                            transition: .3s;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul.caret-style li:hover {
                            background-color: rgba(0, 0, 0, 0.2);
                            -webkit-transition: .3s;
                            transition: .3s;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 .sub-menu a.menu-item {
                            color: #fff !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 .sub-menu a.menu-item:hover {
                            color: #fff !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 .sub-title {
                            padding-bottom: 1rem;
                            margin-bottom: 1rem;
                            border-bottom: 1px solid;
                          }
                          
                          .navbar .dropdown-menu.mega-menu.v-2 .font-small {
                            font-size: 0.85rem;
                          }
                    

Mega menu light version MDB Pro component


                      <!--Navbar-->
<mdb-navbar #nav SideClass="navbar navbar-expand-lg navbar-light white">

    <!-- Navbar brand -->
    <mdb-navbar-brand>
      <a class="navbar-brand" href="#">Navbar</a>
    </mdb-navbar-brand>
  
    <links>
      <!-- Links -->
      <ul class="navbar-nav mr-auto">
        <!-- Dropdown -->
        <li class="nav-item dropdown mega-dropdown" mdbDropdown>
          <a mdbDropdownToggle class="nav-link dropdown-toggle">News</a>
          <div class="dropdown-menu mega-menu row z-depth-1">
            <div class="row">
              <div class="col-md-5 col-xl-3 sub-menu mt-5 mb-5 pl-4">
                <ul class="list-unstyled mx-4 pl-0 dark-grey-text">
                  <li class="sub-title text-uppercase mt-sm">
                    <a class="menu-item" href="">Laptops</a>
                  </li>
                  <li class="sub-title text-uppercase">
                    <a class="menu-item" href="">Phones</a>
                  </li>
                  <li class="sub-title text-uppercase">
                    <a class="menu-item" href="">Lifestyle</a>
                  </li>
                  <li class="sub-title text-uppercase">
                    <a class="menu-item" href="">Technology</a>
                  </li>
                  <li class="sub-title text-uppercase">
                    <a class="menu-item" href="">Design</a>
                  </li>
                </ul>
              </div>
              <div class="col-md-7 col-xl-9">
                <div class="row">
                  <div class="col-xl-6 mt-5 mb-4 pr-5 clearfix d-none d-block">
                    <h6 class="sub-title p-sm mb-4 text-uppercase font-weight-bold dark-grey-text">Featured</h6>
                    <!--Featured image-->
                    <div class="view overlay pb-3">
                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(42).jpg" class="img-fluid z-depth-1" alt="First sample image">
                      <div class="mask rgba-white-slight flex-center">
                        <p></p>
                      </div>
                    </div>
                    <h4 class="mb-2">
                      <a class="news-title" href="">Lorem ipsum dolor sit amet, consectetur isum adipisicing elit.</a>
                    </h4>
                    <p class="font-small text-uppercase text-muted">By
                      <a class="m-sm" href="#!">Anna Doe</a> - July 15, 2017</p>
                  </div>
                  <div class="col-xl-6 mt-5 mb-4 pr-5 clearfix d-none d-xl-block">
                    <h6 class="sub-title p-sm mb-4 text-uppercase font-weight-bold dark-grey-text">Recent</h6>
                    <div class="news-single">
                      <div class="row">
                        <div class="col-md-4">
                          <!--Image-->
                          <div class="view overlay z-depth-1">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid" alt="Minor sample post image">
                            <div class="mask rgba-white-slight flex-center">
                              <p></p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-8">
                          <a class="news-title smaller mb-1" 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-->
                          <div class="view overlay z-depth-1">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid" alt="Minor sample post image">
                            <div class="mask rgba-white-slight flex-center">
                              <p></p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-8">
                          <a class="news-title smaller mb-1" 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-->
                          <div class="view overlay z-depth-1">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(41).jpg" class="img-fluid" alt="Minor sample post image">
                            <div class="mask rgba-white-slight flex-center">
                              <p></p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-8">
                          <a class="news-title smaller mb-1" 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>
            </div>
          </div>
        </li>
      </ul>
      <!-- Links -->
  
      <!-- Links -->
      <ul class="navbar-nav nav-flex-icons ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        </li>
      </ul>
    <!-- Links -->
    </links>
    <!-- Collapsible content -->
  
  </mdb-navbar>
  <!--/.Navbar-->
  
                    

                        import { Component, HostListener, ViewChild, Renderer2, AfterViewInit, ElementRef } from '@angular/core';
import { NavbarComponent } from 'ng-uikit-pro-standard';

@Component({
  selector: 'mega-menu',
  templateUrl: './mega-menu.component.html',
  styleUrls: ['./mega-menu.component.scss'],
})
export class MegaMenuComponent implements AfterViewInit {
  @ViewChild('nav') nav: NavbarComponent;
  breakpoint = 992;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  transformDropdowns() {
    const dropdownMenu = Array.from(this.el.nativeElement.querySelectorAll('.dropdown-menu'));
    const navHeight = this.nav.navbar.nativeElement.clientHeight + 'px';
    dropdownMenu.forEach((dropdown) => {
    this.renderer.setStyle(dropdown, 'transform', `translateY(${navHeight})`);
    });
  }

  @HostListener('click', ['$event'])
  onClick(event) {
    const toggler = this.el.nativeElement.querySelector('.navbar-toggler');
    const togglerIcon = this.el.nativeElement.querySelector('.navbar-toggler-icon');
    if (event.target === toggler || event.target === togglerIcon) {
      setTimeout(() => {
        this.transformDropdowns();
      }, 351);
    }
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerWidth > this.breakpoint) {
      this.transformDropdowns();
    }
  }

  ngAfterViewInit() {
    this.transformDropdowns();
  }

}


                      
 
                          .navbar .mega-dropdown {
                            position: static !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu {
                            width: 100%;
                            border: none;
                            border-radius: 0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu a {
                            padding: 0 0 0 0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu a.news-title {
                            font-weight: 500;
                            font-size: 1.1rem;
                            line-height: 1.5;
                            -webkit-transition: .2s;
                            transition: .2s;
                            color: #4f4f4f !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu a.news-title:hover {
                            color: #2196f3 !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu a.news-title.smaller {
                            font-weight: 400;
                            font-size: 1rem;
                            line-height: 1.4;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .sub-menu a.menu-item {
                            color: #4f4f4f !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .sub-menu a.menu-item:hover {
                            color: #4f4f4f !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .news-single {
                            margin-bottom: 1.2rem;
                            border-bottom: 1px solid #e0e0e0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .sub-title {
                            padding-bottom: 0.5rem;
                            margin-bottom: 1rem;
                            border-bottom: 1px solid #e0e0e0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .p-sm {
                            padding-bottom: 0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .m-sm {
                            margin-bottom: -5px;
                            font-size: 0.85rem;
                            color: #2196f3 !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .m-sm:hover {
                            color: #2196f3 !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .mt-sm {
                            margin-top: -3px;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .font-small {
                            font-size: 0.85rem;
                          }
                          
                    

Mega menu blue version MDB Pro component


                     <!--Navbar-->
<mdb-navbar #nav SideClass="navbar navbar-expand-lg navbar-dark bg-primary">

    <!-- Navbar brand -->
    <mdb-navbar-brand>
      <a class="navbar-brand" href="#">Navbar</a>
    </mdb-navbar-brand>
  
    <links>
      <!-- Links -->
      <ul class="navbar-nav mr-auto">
        <!-- Dropdown -->
        <li class="nav-item dropdown mega-dropdown active" mdbDropdown>
          <a mdbDropdownToggle class="nav-link dropdown-toggle">Gadgets</a>
          <div class="dropdown-menu mega-menu row z-depth-1 primary-color-dark">
            <div class="row">
              <div class="col-md-5 col-xl-3 sub-menu mt-5 mb-5">
                <ol class="list-unstyled ml-4 mr-md-0 mr-4">
                  <li class="sub-title text-uppercase mt-sm">
                    <a class="menu-item-2" href="">Technology</a>
                  </li>
                  <li class="sub-title text-uppercase">
                    <a class="menu-item-2" href="">Design</a>
                  </li>
                  <li class="sub-title text-uppercase">
                    <a class="menu-item-2" href="">Lifestyle</a>
                  </li>
                  <li class="sub-title text-uppercase">
                    <a class="menu-item-2" href="">Laptops</a>
                  </li>
                  <li class="sub-title text-uppercase">
                    <a class="menu-item-2" href="">Phones</a>
                  </li>
                </ol>
              </div>
              <div class="col-md-7 col-xl-9">
                <div class="row pr-4">
                  <div class="col-xl-4 mt-5 mb-4 clearfix d-none d-md-block">
                    <!--Featured image-->
                    <div class="view overlay mb-3 z-depth-1">
                      <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 flex-center">
                        <p></p>
                      </div>
                    </div>
                    <h4 class="mb-2">
                      <a class="news-title-2" 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-xl-4 mt-5 mb-4 clearfix d-none d-xl-block">
                    <!--Featured image-->
                    <div class="view overlay mb-3 z-depth-1">
                      <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 flex-center">
                        <p></p>
                      </div>
                    </div>
                    <h4 class="mb-2">
                      <a class="news-title-2" 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-xl-4 mt-5 mb-4 clearfix d-none d-xl-block">
                    <!--Featured image-->
                    <div class="view overlay mb-3 z-depth-1">
                      <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 flex-center">
                        <p></p>
                      </div>
                    </div>
                    <h4 class="mb-2">
                      <a class="news-title-2" href="">Quis autem vel iure reprehit.</a>
                    </h4>
                    <p class="font-small text-uppercase white-text">
                      <i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 15, 2017 /
                      <i class="fa fa-comments-o px-1" aria-hidden="true"></i> 35</p>
                  </div>
                </div>
              </div>
            </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>
      <!-- Links -->
    </links>
    <!-- Collapsible content -->
  
  </mdb-navbar>
  <!--/.Navbar-->
  
  
                    

                        import { Component, HostListener, ViewChild, Renderer2, AfterViewInit, ElementRef } from '@angular/core';
import { NavbarComponent } from 'ng-uikit-pro-standard';

@Component({
  selector: 'mega-menu',
  templateUrl: './mega-menu.component.html',
  styleUrls: ['./mega-menu.component.scss'],
})
export class MegaMenuComponent implements AfterViewInit {
  @ViewChild('nav') nav: NavbarComponent;
  breakpoint = 992;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  transformDropdowns() {
    const dropdownMenu = Array.from(this.el.nativeElement.querySelectorAll('.dropdown-menu'));
    const navHeight = this.nav.navbar.nativeElement.clientHeight + 'px';
    dropdownMenu.forEach((dropdown) => {
    this.renderer.setStyle(dropdown, 'transform', `translateY(${navHeight})`);
    });
  }

  @HostListener('click', ['$event'])
  onClick(event) {
    const toggler = this.el.nativeElement.querySelector('.navbar-toggler');
    const togglerIcon = this.el.nativeElement.querySelector('.navbar-toggler-icon');
    if (event.target === toggler || event.target === togglerIcon) {
      setTimeout(() => {
        this.transformDropdowns();
      }, 351);
    }
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerWidth > this.breakpoint) {
      this.transformDropdowns();
    }
  }

  ngAfterViewInit() {
    this.transformDropdowns();
  }

}

                      

                        .navbar .mega-dropdown {
                            position: static !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu {
                            width: 100%;
                            border: none;
                            border-radius: 0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu a {
                            padding: 0 0 0 0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu a.news-title-2 {
                            font-weight: 500;
                            font-size: 1.1rem;
                            line-height: 1.5;
                            -webkit-transition: .2s;
                            transition: .2s;
                            color: #fff !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu a.news-title-2:hover {
                            color: #d0d6e2 !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .sub-menu a.menu-item-2 {
                            color: #fff !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .sub-menu a.menu-item-2:hover {
                            color: #fff !important;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .sub-title {
                            padding-bottom: 0.5rem;
                            margin-bottom: 1rem;
                            border-bottom: 1px solid #e0e0e0;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .mt-sm {
                            margin-top: -3px;
                          }
                          
                          .navbar .dropdown-menu.mega-menu .font-small {
                            font-size: 0.85rem;
                          }
                          
                    

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Pagination:
// For MDB Angular Pro
import { NavbarModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { NavbarModule, WavesModule } from 'angular-bootstrap-md'