Dropdown blocks

A dropdown is a panel that hangs off a trigger, does one job and closes: a menu of actions, a list of values to pick from, or the account panel behind an avatar.

Get Pro to installPro14 blocksReact, Vue and Figma
MCPConnect the MCP server
Default action

What the shortcut on this row runs when you press it.

Share screenHand this tab to everyone on the call.
Open linkNew tabOpen the address in a new tab.
Find fileSearch this workspace by name.
Add to task listSend it to today’s list.
Download fileSave a copy to this device.
You can change this later in settings.5 actions

Every block in the set#

Dropdown field

Forms: a labelled, required field that opens its list in a popover card

Command menu

Command palettes: type to filter, press to run, chords that run from anywhere

Pop-up list

Menus where each entry needs a line of explanation, shown only for the row you are on

Model picker

Choosing which models answer: Auto, or one or more

Model picker, compare

Choosing one model, or comparing up to three side by side

Model picker, search

Long model catalogues: filter, group by provider, hold the picks in the field

Take action

Long action sheets: grouped actions that run and confirm

Action menu, filter

Action menus long enough to need a search

Account menu

The avatar menu: settings, support, the plan with its usage and the way out

Account menu, upgrade

Account menus where the plan can be changed without leaving the menu

Account menu, drill-in

Short account menus whose details open as their own panes

Switch account

Multi-account apps: the accounts you can switch to, in rows

Switch account, flip

Switchers that show the swap: the picked mark flies into the header

Switch account, rail

Switchers with few accounts: every account a mark on a capsule

When to use#

  • A form field whose answer comes from a known, short list
  • Actions that belong to one object and don't earn toolbar space
  • The avatar menu: settings, support, the plan, the way out
  • Filters where several options get set in one visit

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.