---
title: Context Menu
description: Context Menu lists the actions for one object after a press and hold. Appetite UI Figma component: item states, a preview slot and tokens.
group: Components
source: https://www.appetiteui.com/docs/context-menu
dateModified: 2026-10-03
---

# Context Menu

Updated: October 3, 2026.

Context Menu lists the actions for one object when someone presses and holds it, without leaving the screen.

## 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.

Specimen: Context Menu, Slot False. 300 x 307, padding 8, gap 2, radius 32.

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.

Specimen: State Default, Pressed, Destructive, Disabled. 284 x 56, padding 6 and 16, gap 12, radius 24.

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.

Specimen: Slot True. 160 plus 8 plus 307 = 475.

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.

- Avoid: 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.