How to add a hover "hide delay" (hoverTimeout) to Sidebar Submenus?
Hello Metronic Team,
I'm using the Metronic Angular theme and my client is having some usability issues with the sidebar menu.
When the sidebar is set to "hover" (for lg screens), the submenus disappear immediately when the mouse accidentally moves off them. This is frustrating for users, especially when navigating multi-level submenus.
My goal is to add a 1-second "grace period" (or "hide delay") so the menu stays open for a moment after the mouse leaves, giving the user time to move the cursor back.
My sidebar menu HTML looks like this (this is from my sidebar-menu.component.html):
<div class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention"
data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
data-kt-menu-placement="right-start">
<span class="menu-link">
<span class="menu-icon">...</span>
<span class="menu-title">My Menu Item</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown ...">
<!-- submenus here -->
</div>
</div>
Could you please tell me the correct way in the Angular version to set this global hoverTimeout?
Thank you for your help!
Replies (2)
To add a hover “hide delay” (hoverTimeout) to sidebar submenus using plain JavaScript (or easily adaptable to frameworks like React/Vue), you can wrap your hover logic in a small timer function.
Here’s a simple and effective example:
✅ Example (Pure JavaScript)
<style>
.sidebar {
width: 200px;
background: #333;
color: white;
padding: 10px;
}
.submenu {
display: none;
background: #444;
margin-top: 5px;
padding: 10px;
}
.sidebar-item:hover .submenu {
display: block;
}
</style>
<div class="sidebar">
<div class="sidebar-item">
Menu 1
<div class="submenu">Submenu 1 content</div>
</div>
<div class="sidebar-item">
Menu 2
<div class="submenu">Submenu 2 content</div>
</div>
</div>
<script>
let hoverTimer;
document.querySelectorAll(".sidebar-item").forEach(item => {
const submenu = item.querySelector(".submenu");
item.addEventListener("mouseenter", () => {
clearTimeout(hoverTimer); // cancel hide
submenu.style.display = "block";
});
item.addEventListener("mouseleave", () => {
// Add delay before hiding submenu
hoverTimer = setTimeout(() => {
submenu.style.display = "none";
}, 400); // 400ms hide delay
});
});
</script>
Hi Aseel Shaheen
Configure the hoverTimeout option when initializing the sidebar menu component. The default is 200ms; set it to 1000ms (1 second).
import { Component, OnInit, AfterViewInit } from "@angular/core";
import { MenuComponent, MenuOptions } from "../../../kt/components/MenuComponent";
@Component({
selector: "app-sidebar-menu",
templateUrl: "./sidebar-menu.component.html",
styleUrls: ["./sidebar-menu.component.scss"],
standalone: false
})
export class SidebarMenuComponent implements OnInit, AfterViewInit {
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
// Initialize sidebar menu with custom hoverTimeout
const menuElement = document.querySelector("#kt_app_sidebar_menu") as HTMLElement;
if (menuElement) {
const customOptions: MenuOptions = {
dropdown: {
hoverTimeout: 1000, // 1 second delay
zindex: 105
},
accordion: {
slideSpeed: 250,
expand: false
}
};
// Create menu instance with custom options
MenuComponent.createInsance("#kt_app_sidebar_menu", customOptions);
}
}
}Use ngAfterViewInit so the DOM is ready before accessing the menu element.
The menu element ID is #kt_app_sidebar_menu (from your HTML template).
hoverTimeout is in milliseconds (1000 = 1 second).
This only affects the sidebar menu; other menus keep the default 200ms.
If you want to change the hoverTimeout for all menus globally, you can modify the defaultMenuOptions in MenuComponent.ts:
const defaultMenuOptions: MenuOptions = {
dropdown: {
hoverTimeout: 1000, // Change from 200 to 1000
zindex: 105,
},
// ... rest of options
}
