PrimeNG Mega Menu open submenu on hover

I am attempting to use the PrimeNG mega menu: https://primeng.org/megamenu But I want the sub menu to open on hover instead of click. This is what I'm trying to do:

<div class="menu-wrap">
<div class="menu-items-wrap center-width">
<p-megamenu [model]="items">
<ng-template let-item pTemplate="item">
<div
(click)="item.command ? item.command() : null"
(mouseenter)="onMouseEnter(item)"
(mouseleave)="onMouseLeave(item)"
class="mega-menu-item"
>
{{ item.label }}
<div *ngIf="item.items && item.visible" class="sub-menu">
<div *ngFor="let subItem of item.items[0]">
<div (click)="subItem.command ? subItem.command() : null" class="sub-menu-item">
{{ subItem.label }}
</div>
</div>
</div>
</div>
</ng-template>
</p-megamenu>
</div>
</div>



import { Component } from '@angular/core';
import { Router } from '@angular/router';
import {Menubar} from 'primeng/menubar';
import {MegaMenu} from 'primeng/megamenu';
import {MegaMenuItem} from 'primeng/api';
import { NgFor, NgIf } from '@angular/common';

@Component({
selector: 'app-nav-bar',
standalone: true,
imports: [
Menubar,
MegaMenu,
NgFor,
NgIf
],
templateUrl: './nav-bar.component.html',
styleUrl: './nav-bar.component.less'
})
export class NavBarComponent {

constructor(private router: Router) {}

items: MegaMenuItem[] = [
{
label: 'My Dashboard',
command: () => this.route('dashboard')
},
{
label: 'Manuals',
items: [
[{ label: 'Review Tool', command: () => this.route('review-tool') }],
[{ label: 'Public Site', command: () => this.route('public-site') }]
],
// Custom handlers for hover
styleClass: 'manuals-menu-item'
},
{
label: 'Administration',
command: () => this.route('admin')
},
{
label: 'Tools',
items: [
[{ label: 'Review Tool', command: () => this.route('review-tool') }],
[{ label: 'Public Site', command: () => this.route('public-site') }]
]
},
];

route(route: string) {
this.router.navigate(['/' + route]); // Navigate to the About page
}

// Mouse events to handle hover functionality
onMouseEnter(menuItem: MegaMenuItem) {
if (menuItem.items) {
menuItem.visible = true; // Show submenu on hover
}
}

onMouseLeave(menuItem: MegaMenuItem) {
if (menuItem.items) {
menuItem.visible = false; // Hide submenu when mouse leaves
}
}

}



But even with all this the menu just behaves like normal. The behavior is the same as:

<body>
<div class="menu-wrap">
<div class="menu-items-wrap center-width">
<p-megamenu [model]="items" />
</div>
</div>
</body>



Has anyone been able to achieve this behavior with the PrimeNG Mega Menu or is this not possible?

Continue reading...