Figma dropdown components

Every product grows a moment where six actions need to live behind one button: the row actions in a table, the account menu in the corner, the share options on a document. The dropdown menu is how interfaces stay calm while doing a lot, and it's deceptively easy to design badly: inconsistent item heights, no hover states, menus that vanish behind other layers or open off the edge of the screen. The 4 dropdown components and 143 variants above are built so none of that happens to you.

Dropdown menus vs select inputs

This page is about action menus: the list behind a "more" button or an account avatar. If you need a form field where users choose a value, that's a select input, which is a separate component set here. The distinction sounds pedantic until you watch a menu try to display a selected value, or a select try to hold a "log out" action.

Nielsen Norman Group's dropdown guidelines add a broader warning worth keeping: menus hide things, so use them for secondary actions, not for the one thing users came to do. The same warning applies to context menus, which hide their contents behind a right click.

Menu anatomy: more than a list of labels

The menu items in this set cover the patterns real products need: plain text items, leading icons, leading avatars for people, and leading dots for status values, plus checkbox items for multi-select filter menus. Around them sit the structural pieces: section subheadings, dividers, spacers, and an optional search field for long menus.

There's also a full family of account menu triggers, from a bare avatar to account cards in three sizes, which is the fast path to the profile menu every app ends up with. Because items, headings, and dividers are separate pieces, a menu grows by stacking components in Auto Layout rather than by redrawing a taller rectangle and re-spacing everything inside it.

States and the open menu

Triggers cover default, hover, focused, and open states, and every menu item has hover, selected, and disabled versions in three sizes. Disabled items deserve a moment: graying out an unavailable action while leaving it visible tells users the action exists, which usually beats hiding it entirely. The set includes open and closed variants of the whole menu, so a prototype can flip between them with one interaction.

Placement is the detail nobody designs until it bites. A menu that opens down-and-left from a button on the right edge of a table disappears off screen, so real implementations flip alignment based on available space. Designing the menu as its own component, rather than baked into a screen, means your developers can position it correctly without redrawing anything.

Prototyping menus that behave

Two Figma techniques carry most dropdown prototypes. "Change to" interactions between the closed and open variants keep everything inside one component. For menus that must float above surrounding content, the classic layering headache, use Figma overlays instead: the menu opens above everything and "close when clicking outside" gives you realistic dismissal for free.

When it's time to build, the same menus exist in code. Untitled UI React dropdowns are open source, built with Tailwind CSS and React Aria, following the W3C menu button pattern with arrow-key navigation handled for you.