Key insights
- A context menu measures before it opens. No room below, it flips up; no room to the right, it mirrors left, always anchored to your cursor and always inside the viewport.
- Twelve flat actions read as noise. Group by intent and split with dividers: pair Rename with Duplicate, Share with Copy link, and isolate Delete at the bottom in red.
- Submenus die the instant the cursor drifts off the row. Draw an invisible safe triangle from cursor to submenu so the menu holds while you move diagonally toward it. That is hover intent.
- Power users never aim. Arrows walk the list, letters jump (press D, land on Duplicate), and Escape closes one level, not the whole menu.
- Mobile has no right click. A long press opens the same actions as a bottom sheet: one menu system, two triggers.
Do / Don't
- Do: Measure available space and flip the menu so it always opens inside the viewport.
- Do: Group actions by intent with dividers, and set the destructive action apart at the bottom in red.
- Do: Add a safe triangle from cursor to submenu so it survives a diagonal move.
- Don't: Close a submenu the moment the cursor leaves the row, ignoring the diagonal path toward it.
- Don't: Dump a dozen ungrouped actions into one flat, unscannable list.
- Don't: Ship right-click only; wire a long press to the same actions on mobile.
