Angular Bootstrap mega menu
Angular Mega Menu - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A newer
version is available for Bootstrap 5. We recommend migrating to the latest version of our
product -
Material Design for Bootstrap 5.
Go to docs v.5
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:
Mega menu dark version MDB Pro component
<!--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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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).webp" 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">
<mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 17, 2017 /
<mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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 fas 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).webp" 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">
<mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 17, 2017 /
<mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 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).webp" 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">
<mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 16, 2017 /
<mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 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 fas 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 fas 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 fas 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 fas 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 fas 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', { static: true }) 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) {
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).webp"
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).webp"
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).webp"
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).webp"
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="#"><mdb-icon fab icon="facebook-f" aria-hidden="true"></mdb-icon></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><mdb-icon fab icon="twitter" aria-hidden="true"></mdb-icon></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><mdb-icon fab icon="instagram" aria-hidden="true"></mdb-icon></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', { static: true }) 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) {
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 v-3 row z-depth-1 primary-color-dark">
<div class="row">
<div class="col-md-5 col-xl-3 sub-menu mb-xl-5 mt-5 mb-5">
<ul class="list-unstyled ml-4 mr-md-0 mr-4">
<li class="sub-title text-uppercase">
<a class="menu-item" 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-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).webp" 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 font-weight-bold pl-0" href="">Lorem ipsum dolor sit amet.</a>
</h4>
<p class="font-small text-uppercase text-white">
<mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 17, 2017 /
<mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 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).webp" 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 font-weight-bold pl-0" href="">Neque porro quisquam est.</a>
</h4>
<p class="font-small text-uppercase text-white">
<mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 16, 2017 /
<mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 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).webp" 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 font-weight-bold pl-0" href="">Quis autem vel iure reprehit.</a>
</h4>
<p class="font-small text-uppercase text-white">
<mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 15, 2017 /
<mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 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', { static: true }) 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) {
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;
}
Angular Mega Menu - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of mega menu component.
Modules used
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 Mega Menu:
import { NavbarModule, WavesModule, DropdownModule } from 'ng-uikit-pro-standard'
import { NavbarModule, WavesModule, DropdownModule } from 'angular-bootstrap-md'
Components
MdbNavbar
Selector: mdb-navbar
Type: NavbarComponent
MdbNavbarBrand
Selector: mdb-navbar-brand
Type: LogoComponent
Links
Selector: links
Type: LinksComponent
Inputs
MdbNavbar
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
containerInside
|
boolean | true | Allow to add container for navbar content | [containerInside]="false" |
iconBackground
|
string | string[]; | - | Allow to change background color of hamburger icon | [iconBackground]="'purple'" |
SideClass
|
string | - | Allow to add custom classes to navbar | [SideClass]="'navbar navbar-expands indigo'" |
Methods
You can get access to the navbar methods from another component. Add template reference variable
to your mdb-navbar component in HTML file:
<mdb-navbar #navbar></mdb-navbar>
Then in your typescript file use @ViewChild decorator to get access to
MdbNavbar methods:
@ViewChild('navbar', { static: true }) navbar: NavbarComponent
| Name | Description | Example |
|---|---|---|
show
|
Open navbar (to use on the expandable navbar) | this.navbar.open() |
hide
|
Close navbar (to use on the expandable navbar) | this.navbar.close() |
toggle
|
Open or close navbar (to use on the expandable navbar) | this.navbar.toggle() |