How to create mega menu in Angular Material - angular-material

Question

I am trying to build multi level mega menu with Angular Material - mat-menu. Now the problem here with me is I wanted to have mega menu like in bootstrap like this but I ended up building this in Angular material. I have changed CSS for changing the width like this:
.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
How can I design mega menu in Angular Material like the image given below?
I am using Angular 7.3.1 (latest version).

Answer 1

Yes it is true that Material Design does not use this pattern. MatMenu is for Material Design menus which are overlay or 'popup' type. The mega menu is nothing more than a toolbar with a roll down panel as suggested by G.Tranter. But the mega menu can be achieved by writing custom css. I dont know is this a correct way to do or not. I have mat-menu like this is .html file
<button mat-button [matMenuTriggerFor]="menu" class="my-full-width-menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
</mat-menu>
And added the following css for full-width of submenu in style.css
.mat-menu-panel {
min-width: 90vw !important;
max-width: 95vw !important;
margin-left: -8px;
margin-top: 24px;
}
Now the concern is of responsive design. For that purpose I need to write #media Query in the component css file like this
#media (min-width: 576px) {
button.mat-menu-item {
width: 100%;
float: left;
}
}
/* Medium devices (tablets, 768px and up)*/
#media (min-width: 768px) {
button.mat-menu-item {
width: 50%;
float: left;
}
}
/* Large devices (desktops, 992px and up)*/
#media (min-width: 992px) {
button.mat-menu-item {
width: 33.333%;
float: left;
}
}
/* very large devices (large desktops, 1200px and up)*/
#media (min-width: 1200px) {
button.mat-menu-item {
width: 25%;
float: left;
}
}
/* Extra large devices (large desktops, 1550px and up)*/
#media (min-width: 1550px) {
button.mat-menu-item {
width: 25%;
float: left;
}
}
Here is the StackBlitz demo of mega menu in mat-menu. This works for my requirement.

Answer 2

I had the same Question and finally I had to handle it by my self and I dont know its the correct way or not ; but its worked
<button mat-raised-button [matMenuTriggerFor]="profileManagementMenu" class="option-button">
{{'ProfileManagement'|translate}}
</button>
<mat-menu #profileManagementMenu="matMenu" class="mega-menu" xPosition="before">
<div fxLayout="row" fxLayoutAlign="start" class="p-1">
<div fxLayout="column" fxLayoutAlign="start" class="p-1 config">
<button mat-menu-item>
{{'Col11'|translate}}
</button>
<button mat-menu-item>
{{'Col12'|translate}}
</button>
</div>
<span class="border" style="opacity: .3"></span>
<div fxLayout="column" fxLayoutAlign="start" class="p-1 config">
<h7 fxLayoutAlign="center">header2</h7>
<button mat-menu-item>
{{'Col21'|translate}}
</button>
<button mat-menu-item>
{{'Col22'|translate}}
</button>
<button mat-menu-item>
{{'Col23'|translate}}
</button>
<button mat-menu-item>
{{'Col24'|translate}}
</button>
<button mat-menu-item>
{{'Col25'|translate}}
</button>
<button mat-menu-item>
{{'Col26'|translate}}
</button>
</div>
</div>
</mat-menu>
and its the scss:
.mega-menu .mat-menu-content {
min-width: 112px;
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 48px);
outline: 0;
background: none;
color: white !important;
:hover {
background: none;
color: white;
}
}
.mat-menu-item:hover {
background: #338ACF !important;
color: white;
}
.mat-menu-content {
min-width: 112px;
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 48px);
outline: 0;
opacity: .95;
background: #2688d6b8;
color: white !important;
}