Building a prediction cone for dropdown menus

sorenblank.com · 1,364 words · saved by 1 readers

Dropdown submenus close the moment your cursor drifts diagonally. A triangle drawn from cursor to submenu edges fixes it, but making it feel right takes more than geometry.

Building a prediction cone for dropdown menus Right-click on your desktop. Hover over a menu item that has a submenu. Now move your cursor diagonally toward that submenu. It stays open. The parent stays highlighted. Everything feels solid and predictable. This works so effortlessly in native apps that you've probably never thought about it. But try doing the same thing in most web-based dropdown menus and something breaks. The submenu vanishes mid-flight. You overshoot, retry, and eventually learn to move your cursor in an awkward L-shape (right first, then down) to avoid triggering the wrong

Building a prediction cone for dropdown menus

related reading