Figma context menu components

Right-click is the oldest power-user gesture on the desktop and still the least discoverable thing in any product that uses it. Nobody sees a context menu until they go looking for one, which makes it excellent for the fifth-most-common action on a file row and a terrible home for anything a new user needs. The 2 context menu components and 32 variants above give you the surface; the discipline about what goes on it is yours.

Context menu or dropdown menu?

A dropdown menu hangs off a visible trigger, usually a three-dot button or an avatar, and opens in a predictable place relative to it. A context menu has no trigger at all. It appears wherever the pointer was when the user right-clicked or held down, which changes two things: the menu has to flip its alignment near screen edges, and the object under the cursor decides what the menu contains.

Right-clicking a row in a data table and right-clicking empty canvas should not produce the same list. This set ships both, with a Simple type for a plain action list and an Advanced type that adds structure, in open and closed variants for each.

The rule worth holding to: every action in a context menu needs a second home somewhere visible. Use the menu as the fast path, not the only path.

Inside the menu item

The menu itself is the boring part. The item is where a system either holds together or falls apart, and this one is built from three pieces. The list item runs 38px tall in a 240px menu, with default, hover, disabled, and open states, plus an optional divider baked into the variant so separators inherit the same spacing instead of being drawn by hand.

In front of the label sits a dedicated inset icon slot with seven types: icon, check, dot, checkbox, avatar, integration icon, and a spacer for rows that need alignment but no marker. That spacer is the unglamorous one that matters, because a menu where three items have icons and two do not will otherwise have five different text positions.

The open state on a list item is the submenu case: the parent row stays highlighted while its child menu is showing. Around the items sit optional headers, an avatar group, a subheading, a search field for long menus, and footers in text or button form.

If you find yourself needing that search field, ask whether the list wanted to be a command menu instead. Everything ships in light and dark.

Figma has no right-click trigger

This is the question that sends people to the forum, and the answer is genuinely no. Figma’s list of prototype triggers covers click, drag, hover, while pressing, mouse enter and leave, mouse down and up, key presses, and delays. Secondary click is not among them.

In practice you prototype the menu on a plain click and note the real trigger in handoff, or you use "while pressing" to approximate a long-press on a mobile flow. Nobody testing your prototype has ever complained about this. Developers reading it later might, so write it down.

Semantics your developers will need

In code a context menu is a menu, not a list of links, and the W3C menu pattern spells out what that buys: arrow keys move between items instead of Tab, Escape closes and returns focus to where it came from, and a parent item exposes its submenu through aria-haspopup and aria-expanded.

Keyboard users also need a way in that is not a mouse gesture, which on Windows is Shift plus F10. If your design shows actions that exist nowhere else, that route is the only one they have.

When it is time to build, the same menus exist in code. Untitled UI React context menus are open source, built with Tailwind CSS and React Aria, with pointer positioning, submenu handling, and keyboard dismissal handled for you.