Metronic 8 Notifications Menu
We are using Metronic 8. In the left aside, there is a "Notifications" button that shows a menu with alerts, updates, and logs. We added a button to delete any alert. When the button is clicked, the menu hides. How can we make it so the menu does not hide?
We tried adding attributes such as:
data-close-on-select="false"
data-kt-menu-static="true"
data-kt-menu-permanent
data-bs-toggle="false"
Replies (7)
Hi Brian
Stop event propagation on the delete button click. The attributes you tried (data-kt-menu-static="true", data-kt-menu-close-on-select="false", etc.) only prevent closing on outside clicks, not on clicks inside the menu.
Can you try this?
// For all delete buttons in the notifications menu
document.addEventListener("click", function(e) {
// Adjust the selector to match your delete button class/attribute
if (e.target.closest(".btn-delete-notification") || e.target.closest("[data-delete-notification]")) {
e.stopPropagation(); // Prevent event from bubbling to menu link handler
// Your delete logic here
}
});Thanks
Good to hear it worked. If you need help with other Metronic 8 menu customizations or have additional questions, feel free to ask.
Hi Brian
Could you please specify which framework? HTML, Metronic Angular, Metronic Laravel, HTML into custom existing Laravel, Angular, etc.
Thanks
