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="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Lorem ipsum dolor sit amet
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Consectetur adipiscing elit
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed do eiusmod tempor incididunt
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut labore et dolore magna
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> 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="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quis nostrud exercitation
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Duis aute irure dolor in
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Laboris nisi ut aliquip ex ea commodo
                    consequat
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Reprehenderit in voluptate
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> 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="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Excepteur sint occaecat
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sunt in culpa qui officia
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed ut perspiciatis unde omnis iste
                    natus error
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Mollit anim id est laborum
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> 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="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Totam rem aperiam eaque
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Beatae vitae dicta sun
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quae ab illo inventore veritatis et
                    quasi architecto
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Nemo enim ipsam voluptatem
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> 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 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="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quis nostrud exercitation
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Duis aute irure dolor in
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Laboris nisi ut aliquip ex ea commodo
                    consequat
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Reprehenderit in voluptate
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> 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="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Excepteur sint occaecat
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sunt in culpa qui officia
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed ut perspiciatis unde omnis iste
                    natus error
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Mollit anim id est laborum
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> 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="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Lorem ipsum dolor sit amet
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Consectetur adipiscing elit
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed do eiusmod tempor incididunt
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut labore et dolore magna
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> 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 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 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="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Totam rem aperiam eaque
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Beatae vitae dicta sun
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quae ab illo inventore veritatis et
                    quasi architecto
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> Nemo enim ipsam voluptatem
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" href="">
                    <mdb-icon icon="caret-right" class="pl-1 pr-3"></mdb-icon> 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;

  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) {
      console.log('test');
      setTimeout(() => {
        this.transformDropdowns();
      }, 351);
    }
  }

  @HostListener('document:scroll', ['$event'])
  onScroll() {
    this.transformDropdowns();
  }

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

  ngAfterViewInit() {
    this.transformDropdowns();
  }

}

                      

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;

  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) {
      console.log('test');
      setTimeout(() => {
        this.transformDropdowns();
      }, 351);
    }
  }

  @HostListener('document:scroll', ['$event'])
  onScroll() {
    this.transformDropdowns();
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
      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" 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" 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" 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;

  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) {
      console.log('test');
      setTimeout(() => {
        this.transformDropdowns();
      }, 351);
    }
  }

  @HostListener('document:scroll', ['$event'])
  onScroll() {
    this.transformDropdowns();
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
      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 a {
                            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'