Submenu Safe Triangle
The reason native nested menus feel right: an invisible triangular "safe area" between the cursor and the open submenu that keeps the submenu open while the pointer moves diagonally toward it, instead of closing the instant the cursor leaves the parent row.
Naïve hover menus close a submenu the moment the pointer exits the parent item's bounding box. But users move the cursor diagonally toward the submenu, briefly passing over sibling items — which a naïve implementation reads as "left the item, close it," causing flicker and accidental dismissal. The fix tracks the pointer's trajectory and holds the current submenu open while the cursor stays inside a triangle (the safe triangle / prediction cone) formed by the cursor position and the submenu's near edge. Source: X/@AliGrids, 2026-06-12 (2,456 likes, 2,065 bookmarks; demo by @sorenblank)
Deep review of the video confirms the behavior: with "Show prediction cone" enabled, the cursor can move diagonally from a parent row toward a submenu while the highlighted triangular grace area keeps that submenu active; with it disabled, adjacent rows steal focus as the cursor crosses them. Source: local video artifact review, 2026-07-01
The pattern is the canonical "menu aim" problem (popularized by Amazon's mega-menu and Ben Kamens' write-up); it is what makes macOS/native menus feel forgiving versus janky web dropdowns.
Implementation notes
- Track recent pointer positions; compute the triangle from the cursor to the submenu's top/bottom edge.
- While the pointer is inside the triangle, delay the close (don't re-evaluate hover-out); outside it, close normally.
- Off-the-shelf: Radix UI / shadcn menu primitives implement pointer-grace logic, so adopting those components gives the behavior for free.
Stack fit (Kevin)
- A concrete instance of the Frontend and Design Skills thesis — the invisible details that separate native-feeling UI from generic web UI; pairs with design-engineering-polish's "polish is in the interaction" stance.
- Default to Radix/shadcn menu primitives (which encode this) rather than hand-rolling hover dropdowns — hand-rolled menus almost always ship the janky version.
Timeline
- 2026-07-01 | Reviewed the local demo video frames: the prediction cone visibly preserves submenu intent on diagonal pointer movement, while the disabled state shows the naive hover failure. Source: local video artifact review, 2026-07-01
- 2026-06-12 | @AliGrids explainer on the safe triangle / prediction cone (demo by @sorenblank): why native menus feel better than web dropdowns. 2,456 likes, 2,065 bookmarks. Source: X/@AliGrids, 2026-06-12