Mega Menu
Angular Bootstrap Mega Menu - free examples, templates & tutorial
Responsive Angular Mega Menu built with Bootstrap 5. Examples of megamenu dropdown on click or hover. Templates with grid, images, links, lists, vertical menu and more.
To learn more read Navbar Docs.
Basic example
A basic dropdown mega menu inside of a Bootstrap navbar.
If you need to extend the depth of your menu by adding submenus to some of the items you could consider using a nested dropdown. Keep in mind that Mega Menu is already a complex component, so in order to keep your design clear and concise you probably shouldn't complicate it even further. It may be worth to consider re-organizing your page structure or using a search bar instead.
A standard practice is to use hamburger menu for mobile devices.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button class="navbar-toggler px-0" type="button"
(click)="collapse.toggle(); menuExpanded = false" aria-controls="navbarExample1" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div mdbCollapse class="collapse navbar-collapse" id="navbarExample1" #collapse="mdbCollapse">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a (click)="toggleMenu()" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div *ngIf="menuExpanded" class="dropdown-menu w-100 mt-0" #megaMenu aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
<a href="" class="list-group-item list-group-item-action">Dolor sit</a>
<a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
<a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action">Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Iste quaerato</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Est iure</a>
<a href="" class="list-group-item list-group-item-action">Praesentium</a>
<a href="" class="list-group-item list-group-item-action">Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
.cdk-overlay-pane, .cdk-overlay-pane > div {
width: 100%;
left: 0;
}
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menuExpanded = false;
toggleMenu() {
setTimeout(() => {
this.menuExpanded = !this.menuExpanded;
}, 0);
}
@HostListener('window:click', ['$event'])
listenToOutsideClick() {
console.log(this.menuExpanded)
if (!this.menuExpanded) {
return;
}
this.menuExpanded = false;
}
}
Bolded headings
Check out different typography options to make the heading inside your megamenu stand out.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
(click)="collapse.toggle()"
class="navbar-toggler px-0"
type="button"
aria-controls="navbarExample2"
[attr.aria-expanded]="collapse.collapsed"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div mdbCollapse #collapse="mdbCollapse" class="collapse navbar-collapse" id="navbarExample2">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a
(click)="toggleMenu()"
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
[attr.aria-expanded]="menuExpanded"
>
Mega menu
</a>
<!-- Dropdown menu -->
<div
*ngIf="menuExpanded"
class="dropdown-menu w-100 mt-0"
aria-labelledby="navbarDropdown"
style="border-top-left-radius: 0; border-top-right-radius: 0; left: 0"
>
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">Lorem ipsum</p>
<a href="" class="list-group-item list-group-item-action">Dolor sit</a>
<a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action">Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Iste quaerato
</p>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Est iure</a>
<a href="" class="list-group-item list-group-item-action">Praesentium</a>
<a href="" class="list-group-item list-group-item-action">Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Cras justo odio
</p>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menuExpanded = false;
toggleMenu() {
setTimeout(() => {
this.menuExpanded = !this.menuExpanded;
}, 0);
}
@HostListener('window:click', ['$event'])
listenToOutsideClick() {
const target = event.target as HTMLElement;
const isToggler = target.getAttribute('id') === 'navbarDropdown'
if (!this.menuExpanded || isToggler) {
return;
}
this.menuExpanded = false;
}
}
Punctuation
Use list group or list typography to customize the lists inside your mega menu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button class="navbar-toggler px-0" type="button"
(click)="collapse.toggle()" aria-controls="navbarExample3" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div mdbCollapse #collapse="mdbCollapse" class="collapse navbar-collapse" id="navbarExample3">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a
(click)="toggleMenu()"
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
[attr.aria-expanded]="menuExpanded"
>
Mega menu
</a>
<!-- Dropdown menu -->
<div
*ngIf="menuExpanded"
class="dropdown-menu w-100 mt-0"
aria-labelledby="navbarDropdown"
style="border-top-left-radius: 0; border-top-right-radius: 0; left: 0"
>
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Lorem ipsum
</p>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Dolor sit</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Iste quaerato
</p>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Est iure</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Praesentium</a>
<a href="" class="list-group-item list-group-item-action"><i
class="fas fa-caret-right pe-2"></i>Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Cras justo odio
</p>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menuExpanded = false;
toggleMenu() {
setTimeout(() => {
this.menuExpanded = !this.menuExpanded;
}, 0);
}
@HostListener('window:click', ['$event'])
listenToOutsideClick(event: PointerEvent) {
const target = event.target as HTMLElement;
const isToggler = target.getAttribute('id') === 'navbarDropdown'
if (!this.menuExpanded || isToggler) {
return;
}
this.menuExpanded = false;
};
}
Mixed content
By leveraging images, videos, product cards, weather cards, testimonial sliders, reviews, and any other element you can make your mega menu even more comprehensive. Vue flexbox utilities and Bootstrap grid should be enough to customize your menu to the highest extent.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
(click)="collapse.toggle()"
class="navbar-toggler px-0"
type="button"
aria-controls="navbarExample4"
[attr.aria-expanded]="collapse.collapsed"
aria-label="Toggle navigation"
(click)="collapse.toggle()"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div mdbCollapse #collapse="mdbCollapse" class="collapse navbar-collapse" id="navbarExample4">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a
(click)="toggleMenu()"
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
[attr.aria-expanded]="menuExpanded"
>
Mega menu
</a>
<!-- Dropdown menu -->
<div
*ngIf="menuExpanded"
class="dropdown-menu w-100 mt-0"
aria-labelledby="navbarDropdown"
style="border-top-left-radius: 0; border-top-right-radius: 0; left: 0"
>
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-xl-3 mb-3 mb-xl-0">
<div class="pt-2">
<p class="text-uppercase font-weight-bold">Explicabo voluptas</p>
<div
class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
mdbRipple
rippleColor="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-dark">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid.
Sed id nihil magni, sint vero provident esse numquam perferendis ducimus
dicta adipisci iusto nam temporibus modi animi laboriosam?
</p>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-xl-0">
<div class="pt-2">
<p class="text-uppercase font-weight-bold">Explicabo voluptas</p>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt="Hollywood Sign on The Hill"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt="Palm Springs"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt="Los Angeles Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt="Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Iste quaerato
</p>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Cras justo odio</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Est iure</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Praesentium</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Laboriosam</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Dolor sit</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Amet consectetur</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Cras justo odio</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Adipiscing elit</a
>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Cras justo odio
</p>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Saepe</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Vel alias</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Sunt doloribus</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Cum dolores</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Perspiciatis quo</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Cras justo odio</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Laudantium maiores</a
>
<a href="" class="list-group-item list-group-item-action"
><i class="fas fa-caret-right pe-2"></i>Provident dolor</a
>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menuExpanded = false;
toggleMenu() {
setTimeout(() => {
this.menuExpanded = !this.menuExpanded;
}, 0);
}
@HostListener('window:click', ['$event'])
listenToOutsideClick(event: PointerEvent) {
const target = event.target as HTMLElement;
const isToggler = target.getAttribute('id') === 'navbarDropdown'
if (!this.menuExpanded || isToggler) {
return;
}
this.menuExpanded = false;
};
}
Media list
Creating a list of news articles in your mega menu, can be easily achieved by utilizing media objects.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
(click)="collapse.toggle()"
class="navbar-toggler px-0"
type="button"
aria-controls="navbarExample5"
[attr.aria-expanded]="collapse.collapsed"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div mdbCollapse #collapse="mdbCollapse" class="collapse navbar-collapse" id="navbarExample5">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a
(click)="toggleMenu()"
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
[attr.aria-expanded]="menuExpanded"
>
Mega menu
</a>
<!-- Dropdown menu -->
<div
*ngIf="menuExpanded"
class="dropdown-menu w-100 mt-0"
aria-labelledby="navbarDropdown"
style="border-top-left-radius: 0; border-top-right-radius: 0; left: 0"
>
<div class="container">
<div class="row my-4">
<div class="col-md-12 col-lg-4 mb-4 mb-lg-0">
<p class="text-uppercase font-weight-bold">Explicabo voluptas</p>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt="Hollywood Sign on The Hill"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt="Palm Springs Road"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt="Los Angeles Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt="Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">Iste quaerato</p>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt="Hollywood Sign on The Hill"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt="Palm Springs Road"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt="Los Angeles Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt="Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">Cras justo odio</p>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt="Hollywood Sign on The Hill"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt="Palm Springs Road"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt="Los Angeles Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt="Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menuExpanded = false;
toggleMenu() {
setTimeout(() => {
this.menuExpanded = !this.menuExpanded;
}, 0);
}
@HostListener('window:click', ['$event'])
listenToOutsideClick(event: PointerEvent) {
const target = event.target as HTMLElement;
const isToggler = target.getAttribute('id') === 'navbarDropdown'
if (!this.menuExpanded || isToggler) {
return;
}
this.menuExpanded = false;
};
}
Big news
Adding a newsfeed preview at the top of the mega-menu dropdown, is a standard practice in blog templates.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
aria-controls="navbarExample6"
[attr.aria-expanded]="collapse.expanded"
aria-label="Toggle navigation"
(click)="collapse.toggle()"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div mdbCollapse #collapse="mdbCollapse" class="collapse navbar-collapse" id="navbarExample6">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a
(click)="toggleMenu()"
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
[attr.aria-expanded]="menuExpanded"
>
Mega menu
</a>
<!-- Dropdown menu -->
<div
*ngIf="menuExpanded"
class="dropdown-menu w-100 mt-0"
aria-labelledby="navbarDropdown"
style="border-top-left-radius: 0; border-top-right-radius: 0; left: 0"
>
<div class="container">
<div class="row my-4">
<div class="col-md-4 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">Explicabo voluptas</p>
<div
class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
mdbRipple
rippleColor="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-dark">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid.
Sed id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
adipisci iusto nam temporibus modi animi laboriosam?
</p>
</a>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">Iste quaerato</p>
<div
class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
data-mdb-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/new/fluid/city/011.webp"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-danger"><i class="fas fa-chart-pie pe-1"></i>Business</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-dark">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid.
Sed id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
adipisci iusto nam temporibus modi animi laboriosam?
</p>
</a>
</div>
<div class="col-md-4">
<p class="text-uppercase font-weight-bold">Cras justo odio</p>
<div
class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
data-mdb-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/new/fluid/city/018.webp"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-warning"><i class="fas fa-code pe-1"></i>Technology</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-dark">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid.
Sed id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
adipisci iusto nam temporibus modi animi laboriosam?
</p>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menuExpanded = false;
toggleMenu() {
setTimeout(() => {
this.menuExpanded = !this.menuExpanded;
}, 0);
}
@HostListener('window:click', ['$event'])
listenToOutsideClick(event: PointerEvent) {
const target = event.target as HTMLElement;
const isToggler = target.getAttribute('id') === 'navbarDropdown'
if (!this.menuExpanded || isToggler) {
return;
}
this.menuExpanded = false;
};
}
Mixed media
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
aria-controls="navbarExample7"
[attr.aria-expanded]="collapse.expanded"
aria-label="Toggle navigation"
(click)="collapse.toggle()"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div mdbCollapse #collapse="mdbCollapse" class="collapse navbar-collapse" id="navbarExample7">
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li mdbDropdown class="nav-item dropdown position-static">
<a
mdbDropdownToggle
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
aria-expanded="false"
>
Mega menu
</a>
<!-- Dropdown menu -->
<div
mdbDropdownMenu
class="dropdown-menu w-100 mt-0"
aria-labelledby="navbarDropdown"
style="border-top-left-radius: 0; border-top-right-radius: 0"
>
<div class="container">
<div class="row my-4">
<div class="col-md-12 col-xl-6 mb-4 col-lg-0">
<p
class="text-uppercase font-weight-bold text-center d-flex justify-content-center align-items-center"
>
Iste quaerato
<span class="badge bg-danger shadow-1-strong ms-2">News of the day</span>
</p>
<div class="row gx-4">
<div class="col-md-6 mb-4">
<div
class="bg-image hover-overlay ripple rounded shadow-2-strong"
mdbRipple rippleColor="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/080.webp"
class="img-fluid"
/>
<a href="#!">
<div
class="mask"
style="background-color: rgba(251, 251, 251, 0.15)"
></div>
</a>
</div>
</div>
<div class="col-md-6 mb-3">
<p class="text-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur
eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi
laborum sapiente illo possimus, commodi dignissimos obcaecati illum maiores
corporis.
</p>
<button type="button" class="btn btn-primary">Read more</button>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-4 mb-md-0">
<p class="text-uppercase font-weight-bold">Explicabo voluptas</p>
<div
class="bg-image hover-overlay shadow-1-strong rounded ripple mb-4"
mdbRipple rippleColor="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp"
class="img-fluid"
/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</a>
</div>
<div class="d-flex justify-content-between">
<a href="" class="text-info"><i class="fas fa-plane pe-1"></i>Travels</a>
<p><u>15.07.2020</u></p>
</div>
<a href="" class="text-dark">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid.
Sed id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
adipisci iusto nam temporibus modi animi laboriosam?
</p>
</a>
</div>
<div class="col-md-6 col-xl-3">
<p class="text-uppercase font-weight-bold">Explicabo voluptas</p>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
alt="Hollywood Sign on The Hill"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
alt="Palm Springs Road"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
alt="Los Angeles Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
alt="Skyscrapers"
/>
</div>
<div class="col-9">
<p class="mb-2">
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p><u>15.07.2020</u></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menuExpanded = false;
toggleMenu() {
setTimeout(() => {
this.menuExpanded = !this.menuExpanded;
}, 0);
}
@HostListener('window:click', ['$event'])
listenToOutsideClick(event: PointerEvent) {
const target = event.target as HTMLElement;
const isToggler = target.getAttribute('id') === 'navbarDropdown'
if (!this.menuExpanded || isToggler) {
return;
}
this.menuExpanded = false;
};
}
Dropdown on hover
For desktop devices, you can also enable displaying mega menu on hover.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler px-0"
type="button"
aria-controls="navbarExampleOnHover"
[attr.aria-expanded]="collapse.expanded"
aria-label="Toggle navigation"
(click)="collapse.toggle()"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div
mdbCollapse
#collapse="mdbCollapse"
class="collapse navbar-collapse"
id="navbarExampleOnHover"
>
<!-- Left links -->
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
<li class="nav-item">
<a class="nav-link" href="#">Regular link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown dropdown-hover position-static">
<a
(mouseover)="handleMouseover()"
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
[attr.aria-expanded]="menuExpanded"
>
Mega menu
</a>
<!-- Dropdown menu -->
<div
*ngIf="menuExpanded"
#dropdownMenu
class="dropdown-menu w-100 mt-0"
aria-labelledby="navbarDropdown"
style="border-top-left-radius: 0; border-top-right-radius: 0; left: 0"
>
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
<a href="" class="list-group-item list-group-item-action">Dolor sit</a>
<a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
<a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action">Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Iste quaerato</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Est iure</a>
<a href="" class="list-group-item list-group-item-action">Praesentium</a>
<a href="" class="list-group-item list-group-item-action">Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
.dropdown-hover:hover>.dropdown-menu {
display: inline-block;
}
.dropdown-hover>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild('dropdownMenu') dropdownMenu: ElementRef;
menuExpanded = false;
handleMouseover() {
setTimeout(() => {
this.menuExpanded = true;
}, 0);
}
@HostListener('window:mousemove', ['$event'])
listenToOutsideClick(event: PointerEvent) {
const target = event.target as HTMLElement;
const dropdownMenu = this.dropdownMenu;
if (!dropdownMenu) {
return;
}
const isToggler = target.getAttribute('id') === 'navbarDropdown';
if (!this.menuExpanded || isToggler || dropdownMenu.nativeElement.contains(target)) {
return;
}
this.menuExpanded = false;
}
}