
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.
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.
