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
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 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
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'