Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update

Issue with Menu Hover Behavior in Metronic


Hi,

I'm experiencing an issue with the Metronic menu. I have implemented it as shown below, using data-kt-menu-trigger="hover", but the menu behavior is inconsistent. Sometimes it opens on hover, and sometimes it doesn't.
I’m encountering this issue in multiple places across the application.

Here’s how I'm using it:


<div class="card-toolbar">
<!--begin::Menu-->
<button
type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="hover"
data-kt-menu-placement="bottom-end"
data-kt-menu-attach="parent"
>
<i class="ki-duotone ki-category fs-6">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
</i>
</button>

<!--begin::Menu 1-->
<div class="menu menu-column menu-rounded menu-sub menu-sub-dropdown w-200px menu-state-bg-light-primary menu-gray-800" data-kt-menu="true">
@for(item of menuItems;track item.dic_entity_id){
<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">

<!--begin::Menu item-->
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
<span class="menu-title">{{ item.dic_translation }}</span>
@if(item.dic_value?.length > 0) {
<span class="menu-arrow"></span>
}
</a>
<!--end::Menu item-->

<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
@for (event of item.dic_value; track event.event_id){
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
<span class="menu-icon" data-kt-element="icon">
<img [src]="event.icon_path" class="w-20px"/>
</span>
<span class="menu-title"> {{ event.event_name }}</span>
</a>
</div>
<!--end::Menu item-->
}
</div>
<!--end::Menu sub-->
</div>
}
<!--end::Menu item-->
</div>
<!--end::Menu 1-->
<!--end::Menu-->
</div>
</div>


Have you encountered this issue before? Is there a known fix or a best practice to ensure consistent hover behavior?

Thanks in advance!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi Lea Karni

Its likely cause of inconsistent hover behavior in menu class. We will fix it.

In the meantime, please try these solutions:

Make sure to initialize the menu after your content is fully rendered:


import { AfterViewInit, Component } from "@angular/core";
import { KTMenu } from "path/to/menu";

@Component({
// your component config
})
export class YourComponent implements AfterViewInit {
ngAfterViewInit() {
// Small delay to ensure Angular has finished rendering
setTimeout(() => {
KTMenu.init();
}, 10);
}
}


You can increase the hover timeout to make the menu more "sticky" by adding a data attribute:

<button
type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="hover"
data-kt-menu-placement="bottom-end"
data-kt-menu-attach="parent"
data-kt-menu-dropdown-hover-timeout="500"
>


If hover continues to be problematic, consider switching to click-based triggering:

<button
type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-attach="parent"
>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(