Gallery
See what others have created

speedingplunge
@speedingplunge
Context Menu
Design a context menu for an app workspace item, opened by right-click, long-press, or keyboard menu key. The menu should feel attached to the target, not floating arbitrarily, and it should reposition itself when space is tight so it never clips off-screen.
Use a compact vertical list with clear hierarchy: primary actions first, secondary actions grouped below, and destructive actions separated at the bottom. Include icons only when they help recognition, and make sure labels are short enough to scan in a single glance.
Define the interaction states that make the component usable: closed, open, hover/focus, disabled, and destructive confirmation if needed. The first actionable item should receive focus on open, and keyboard users should be able to move, select, and dismiss the menu without losing context.
Account for touch and small screens by increasing tap targets and adapting the menu to the available space. The result should read as one system across input methods, with the same actions available and the same ordering preserved.
What to deliver
- Design the trigger and open state for a context menu on right-click and long-press.
- Place the menu relative to the anchor and keep it inside the viewport.
- Group related actions with dividers and clear labels.
- Show keyboard access with a focused item and shortcut hints.
- Include disabled, destructive, and overflow actions as distinct states.
Incorporate dynamic elements like icons or color-coding to denote actions, such as editing or sharing, making the menu both visually appealing and functionally rich.