0

I have used the below code to create the toolbar and menu using angular material 7. I have a requirement to create a mega menu in angular material. 

<mat-toolbar color="primary" class="example-toolbar">
    <mat-toolbar-row style="height: 28px !important;">
            <div class="div-center">
                <button mat-flat-button color="primary" [matMenuTriggerFor]="menu">
                    <mat-icon>directions_car</mat-icon>
                    Cars
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item>Item 1</button>
                    <button mat-menu-item>Item 2</button>
                </mat-menu>
            </div>
        </mat-toolbar-row>
</mat-toolbar>

I am looking for a mega menu createing like this https://mdbootstrap.com/docs/jquery/navigation/mega-menu/

Can anyone know how can I create the mega menu like above.

Gustavo Lopes
  • 3,794
  • 4
  • 17
  • 57
San Jaisy
  • 15,327
  • 34
  • 171
  • 290

2 Answers2

0

You need to tweak the mat-menu component a bit and build your own component to make a mega menu component.

Otherwise there is no direct way to configure with the material.

SIMPLE DEMO

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
0

Angular 2 Material Customize md-menu

.mat-menu-panel .custom {
  background-color: darkgrey;
  border-radius: 0px;
}

https://github.com/angular/material2/issues/10322

San Jaisy
  • 15,327
  • 34
  • 171
  • 290