Skip to content

Components / Actions / MenuOpen in Figma

Menu

Ready

Holds the second and later actions for a screen, record or card, behind the more icon.

Platforms Phone · TabletGroup ActionsUpdated 26 Oct 2026

When to use

A screen or record has more actions than its one main action.
A card needs actions that would clutter it if shown as buttons.
Destructive actions such as Delete or Deactivate, which should take a deliberate tap to reach.

When not to use

If people need to	Use
Do the one main thing on a screen	Button
Choose a value for a field	Dropdown
Pick from a long list with search	Bottom sheet
Switch between views	Secondary tab

Anatomy

more_vert

More icon · required, opens the menu
Container · required; the pale fill shows as 1px lines between items
Item icon · optional; all items have one or none do
Item label · required
Destructive item · optional, always last

Variants

Variant	Purpose	Figma
Actions only	Icon and label per item	Designed
With a destructive action	Delete, Deactivate or Cancel last, in Red	Designed
Text only	Labels without icons when no icon reads clearly	Designed

States

State	When	What changes	Figma
Closed	Default	Only the more icon shows	Designed
Open	After tapping the more icon	Menu drops below the icon, right edges aligned	Designed
Item pressed	Finger is down on an item	A 10% black layer over the item	Temporary rule

Behaviour

Opens below the more icon, its right edge lined up with the icon. If there is no room below, it opens above.
Tapping an item runs it and closes the menu. Tapping outside closes it with nothing done.
Destructive items ask for confirmation before they run.

Phone and tablet

	Phone	Tablet
Size and look	Same on both	Same on both
Width	Fits the longest label, at least 180	Fits the longest label, at least 180

Content

Part	Rule
Item label	A verb or verb and noun in sentence case: "Edit", "Download report"
Order	Most used first; destructive last
Number of items	Two to six. One item means it should be a button

Do and don't

DoPut Delete last in the menu, in Red.

Edit

Delete

Don'tShow Delete as a red button beside Edit.

DoGive every item an icon, or none.

Don'tMix items with and without icons.

Button Top bar Record header Confirm

Specs

Click a value to copy it.

Part	Property	Phone	Tablet
Container	Fill between items
	Corners
	Shadow
	Gap between items
	Minimum width
Item	Fill
	Padding
	Icon to label
Icon	Size
Label	Type
	Colour
Destructive item	Label and icon colour
More icon	Button

← Add buttonTop bar →