Updated
Context Menu
Context Menu lists the actions for one object when someone presses and holds it, without leaving the screen.
Updated
Preview
Actions for one specific object, raised by press and hold: .contextMenu on iOS, a long press opening a DropdownMenu on Android. Press a row to see it fill.
The menu is 307 tall: 8 of padding, five rows of 56, five gaps of 2, the 1 separator, 8 again. Each row takes its icon from Icon Swap, so the menu above shows share, link, pencil, star and trash.
The menu surface is bg/raised, the token for floating surfaces: white in light and #242427 in dark, so the menu separates from a dark screen.
Source: Figma sets Context Menu and _Context Menu Item, read October 2, 2026.
Which states does a Context Menu item have?
Four: Default, Pressed, Destructive and Disabled, and only Pressed paints a fill. The item is the building block behind every row and sits only inside the menu.
Default carries no fill, so a row is invisible until pressed, and Pressed takes bg/weak-50. Destructive takes state/error/base-500 on both the label and the icon, and belongs last, under a separator.
Disabled takes fg/disabled-400 and text/disabled-400, which resolve to the same primitive in both modes. A standalone item is 276 wide and stretches to 284 inside the menu.
What does Slot True add to a Context Menu?
Slot True raises the pressed object above the menu, which is the iOS convention and reads well on both platforms. It is the one boolean axis.
The slot ships empty and the object is yours to place. It is 160 tall with 8 between it and the menu, which is shortened here.
Properties
One axis on the published component and a slot. The rest sit on the item inside it, a building block used only within the menu.
| Property | Type | Default |
|---|---|---|
Slot | Variant: False, True | False |
Preview | Slot, 300 x 160 | empty |
State | Variant on the item: Default, Pressed, Destructive, Disabled | Default |
Label Text | Text, on the item | Menu item |
Icon Swap | Instance swap, on the item | share-2 |
Context Menu ships 2 variants and the item ships 4. The menu composes five items and a separator, so a change to the item reaches every row of both variants.
Tokens
Every value the component reads, resolved through its aliases to the Foundations primitive.
| Token | Light | Dark | Applied to |
|---|---|---|---|
bg/raised | #FFFFFF | #242427 | The menu surface |
border/soft-100 | #E9E9EA | #2F2F31 | 1px inside stroke, and the separator |
bg/weak-50 | #F4F5F5 | #242427 | Pressed row |
text/strong-950 | #0E0E0F | #FFFFFF | Label |
fg/sub-700 | #48484A | #C7C7CC | Icon |
state/error/base-500 | #FB2C36 | #FB2C36 | Destructive label and icon |
text/disabled-400 | #AEAEB2 | #8E8E93 | Disabled label |
fg/disabled-400 | #AEAEB2 | #8E8E93 | Disabled icon |
The shadow is the effect style dropShadow/lg: 0 12 18 at minus 3 on black at 8 percent, over 0 5 6 at minus 5 on black at 5 percent. Geometry runs on dimensions/radius/3xl 32 for the menu and dimensions/radius/2xl 24 for the row, with dimensions/spacing/2 8, dimensions/spacing/0-5 2, dimensions/spacing/4 16, dimensions/spacing/3 12 and dimensions/spacing/1-5 6.
How does Context Menu differ on iOS and Material 3?
iOS has its own Menu set in the file, 238 wide with three to five items. Material 3 has no menu set in the file, and Android raises the same actions with a long press and a DropdownMenu.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Context Menu | iOS / Menu: Items 3, 4 or 5, optional section title, optional quick action row, in the iOS glass material. Items are 40 tall. | None in the file. In code, a Compose DropdownMenu opened by a long press. | Appetite UI is 300 wide with 56 tall rows and a preview slot above the menu. It has no quick action row and no submenu, and the Pressed row paints bg/weak-50 where iOS paints glass. |
Every row is 56 tall, above the minimum touch target of 44 pt on iOS and 48 dp on Android, which comes from platform/min-touch-target in the Platform collection.
Guidelines
Do
Put the destructive action last, below a separator, and cap the menu at about seven rows.
Don't
Do not open with the destructive row, and do not let this menu be the only way to reach an action. Press and hold is not discoverable, so everything here must also exist somewhere visible.
The menu belongs to one object, not to the screen. Actions that apply to the whole view belong in a toolbar or an action sheet.