Logo of UI Challenges
Sign in
Wireframe example for Context Menu
An example interpretation of the prompt
Icon of target

Context Menu

Icon of book open

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.

Icon of book open

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.

Better at UI design with every challenge

Select complexity and generate challenge.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.