Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
Currently, when you move from the first menu item you want to hover (ie "Configuration") to go to the drawer to interact with any of the children, it will probably close before you reach your target. The reason is that you're leaving the target item ("configuration", without entering the other target ("configuration drawer-popover").
In a lot of places this is solved with a small delay, but it makes the interaction a bit slower. But Drupal's admin UI is a working space where people will want fast response and interaction times.
Proposed resolution
Implement a solution that doesn't add extra reaction time but that improves the current interaction.
Amazon and Angular, for example, implemented a solution that detects the direction of the cursor’s path:
If the cursor moves into the blue triangle the currently displayed submenu will stay open for just a bit longer. Image from Ben Kamens blog post.
Thanks to @lauriii for sharing this really useful post.
Remaining tasks
Update the interaction.
User interface changes
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | Withoutpatch-D11.mp4 | 1.19 MB | kanchan bhogade |
| tumblr_53bdf2f4d5b0a7489743e2eaa140cd89_8896d08c_500.png | 63.01 KB | ckrina | |
| drawer-closes.gif | 883.23 KB | ckrina |
Issue fork navigation-3437401
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3437401-js-polishing
changes, plain diff MR !219 - 3437401-drawer-closes-when compare
Comments
Comment #2
finnsky commentedGonna work on it.
Comment #4
finnsky commentedThe main problem we have now is that some things in the scripts were done for a completely different menu and other scenarios.
I've added controlled hover open.
On hover we wait for 500ms and then check if button not opened by click yet, or button still hovered.
Looks much smoother than before.
Also in this MR i've commented few things which should be reworked or at least discussed.
1. Imo we don't need to close all popovers on any tooltip open. This is current behaviour https://gyazo.com/b8eff73a5e9ea7cbdba0047f8ce953cc and i'm fine with it
2. ScrollIntoView on active url in popover. It looks weird now, probably we only need to activate this ONLY when active url is far outside from scroll area.
3. We also need to add usage of debounce in popover opening
I think we can move that ^ 3 things into separated issues/discussions.
4. Added fix for this. We have 2 levels on menu. So we need to avoid cases when open child menu closes parent.
https://www.drupal.org/project/navigation/issues/3437375
Please review.
SB: https://sparkling-gaufre-c402f2.netlify.app/iframe.html?args=&id=page--b...
Comment #7
kanchan bhogade commentedHi,
I've tried to reproduce the mentioned issue on Drupal 11.x with Standard and Umami; but unable to reproduce the issue, Drover does not close when moving for submenus. Please let me know if I'm missing anything
adding recording for the reference
Comment #9
finnsky commented@Kanchan Bhogade thank you for review! Could you please retest in current 1.x
In your video i see pretty outdated things.
Comment #11
ckrinaThis is actually implementing the strategy of a delay, which is what I mentioned to try to avoid :)
If you want to go initially for beta this week with the delay it's OK because we're making it look smoother, but let's open another issue for that (plus the other JS polishing that you might want to do). The final solution though should follow the strategy that "predicts the mouse movement".
That's why I pasted links to libraries and strategies that have found a solution already without implementing a delay:
Comment #12
finnsky commentedGonna try one more thing here.
Comment #13
finnsky commentedPushed with green debug path displays that safe polygons.
Comment #14
finnsky commentedRemoved green lines and fixed end point
https://sparkling-gaufre-c402f2.netlify.app/iframe.html?args=&id=page--b... for debug info
Comment #16
ckrinaMerging this! Let's follow-up with the small things found and discussed in Slack this past days in other issues so this improvement can unblock the beta release Thanks for all the great and fast work here, @finnsky!!