Search code examples
angularangular-materialangular7

How to show the angular material drop down on mouse over?

Now on clicking of the hamburger menu i am getting drop down list instead i need it on mouse hover on hamburger menu here is the stack blitz link.

enter image description here

Solution

  • You can do this using matMenuTrigger Directive

    <button mat-icon-button [matMenuTriggerFor]="menu" 
    #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">

    To hide menu, add mouseleave event for a menu.

    Bundle all your menu items within a span or div tag. And then attach (mouseleave) event to it

    <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <span (mouseleave)="menuTrigger.closeMenu()">
      <button mat-menu-item>
        <mat-icon>home</mat-icon>
        <span>Home</span>
        ........
       <mat-icon>exit_to_app</mat-icon>
       <span>Logout</span>
     </button>
    </span>
</mat-menu>

    Forked DEMO