This Angular directive provides functionality to handle hover menu behavior, allowing menus to open when hovered over and close when the mouse leaves.

npm install mat-menu-hover@latest

Since the directive is marked as standalone you can directly import it into a module.

import { Component } from  '@angular/core';
import { HoverMenuDirective } from  'mat-menu-hover';

@Component({
    imports: [HoverMenuDirective],
    selector: 'app-root',
	...
})
export class AppComponent { }

<button mat-button [matMenuTriggerFor]="menu" matHoverMenu>Menu</button>
<mat-menu #menu="matMenu">
	<!-- Menu content goes here -->
</mat-menu>

• Currently, it is not possible to nest menus. It will only work with single-level mat-menus.

This project is licensed under the MIT License - see the LICENSE file for details.