Context Menu
Context Menu reveals the actions for one object on press and hold, without leaving the screen.
Preview
Actions for one specific object, raised by press and hold. Press a row to see it fill. On iOS this is .contextMenu; on Android a long press opening a DropdownMenu.
307 is arithmetic: 8 of padding, five 56 rows, five 2 gaps, the 1 separator, 8 again. Every row carries the same share-2 icon because Icon Swap sits at its default on all five. Swap it per row.
Item
The building block behind every row, not for direct use. Four states, and only one paints a fill.
Default carries no fill, so a row is invisible until pressed. Pressed takes bg/weak-50. Destructive takes state/error/base-500 on both halves and belongs last, under a separator. Disabled takes fg/disabled-400 and text/disabled-400, which resolve to the same primitive in both modes.
Preview slot
One boolean axis. Slot True raises the pressed object above the menu, which is the iOS convention and reads well on both platforms.
The slot ships empty, so the page marks the space rather than invent the object that would fill it. The menu below is shortened here; the slot and the gap are the file's, 160 and 8.
Properties
One axis on the published component and a slot. The rest sit on the item inside it, a building block the file marks as not for direct use.
Context Menu ships 2 variants, 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.
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.
Guidelines
Put the destructive action last, below a separator, and cap the menu at about seven rows.
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.