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 { NgModule } from '@angular/core';
import { HoverMenuDirective } from 'mat-menu-hover';
@NgModule({
declarations: [...],
imports: [
HoverMenuDirective
],
exports: [...]
})
export class AppModule { }
<button mat-button [matMenuTriggerFor]="menu" matHoverMenu>Menu</button>
<mat-menu #menu="matMenu">
<!-- Menu content goes here -->
</mat-menu>
Keyword | Function | Note |
---|---|---|
[closeDelay] | Adds a delay before the menu closed | Default = 50ms |
(opened) | Emits if the menu is opened/closed |
- 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.