Hi all! Im working on a navigation bar using Untitled UI kit, but when using multiple hover dropdown items it’s becoming un-usable because of the cursor touches the other button on the way towards the menu item.
Question:
Is there a way to create a delay, or a way to ignore the milliseconds the cursor is touching the other dropdown button?
Here is my public share link:
Hello Jimmy!
Here is a minimal pseudo-code snippet (using vanilla JavaScript) that delays the opening of a dropdown when hovered. You’d adapt it to your own structure, but this shows the general idea:
const dropdownTriggers = document.querySelectorAll('.nav-item.has-dropdown');
let openMenuTimeout;
dropdownTriggers.forEach(trigger => {
// On mouseenter, set a timeout to open the menu
trigger.addEventListener('mouseenter', (e) => {
// Clear any existing timeout so we don't stack them
clearTimeout(openMenuTimeout);
openMenuTimeout = setTimeout(() => {
// Open the dropdown (e.g., by adding an "active" class)
trigger.classList.add('active');
}, 200); // 200ms delay (adjust to taste)
});
// On mouseleave, immediately close (or also use a delay if you want)
trigger.addEventListener('mouseleave', (e) => {
clearTimeout(openMenuTimeout);
// Close the dropdown
trigger.classList.remove('active');
});
});
Notes on This Approach
If the cursor just “grazes” a neighboring menu for <200ms, it doesn’t open.
You can also do the same trick on mouseleave—so if you want the menu to remain open if the user is quickly moving towards a submenu, you’d add a small delay on removing “active.”
Tuning the exact delay to feel right for you often takes some experimenting (e.g., 150ms–300ms).