Skip to content

app studio/docs

Reference Examples

COMPONENT REFERENCE Reference

@app-studio/components

ContextMenu

A floating menu that appears upon user interaction, typically a right-click or long-press.

View component source

Import

ts

import { ContextMenu } from '@app-studio/components';

New to the library? Complete installation and provider setup first.

Interactive examples

Try the component, then open Code to copy the complete example.

Loading preview…

import React from 'react';
import { ContextMenu } from '@app-studio/components';
import { View } from 'app-studio';

export const CompoundContextMenu = () => {
  const handleSelect = (action: string) => {
    alert(`Action selected: ${action}`);
  };

  return (
    <View
      padding={10}
      height={200}
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <ContextMenu>
        <ContextMenu.Trigger>
          <View
            padding={8}
            backgroundColor="color-blue-100"
            color="color-blue-800"
            borderRadius="sm"
            cursor="context-menu"
          >
            Right-click here (Compound Pattern)
          </View>
        </ContextMenu.Trigger>
        <ContextMenu.Content>
          <ContextMenu.Item onSelect={() => handleSelect('Edit')}>
            Edit
          </ContextMenu.Item>
          <ContextMenu.Item onSelect={() => handleSelect('Duplicate')}>
            Duplicate
          </ContextMenu.Item>
          <ContextMenu.Separator />
          <ContextMenu.Item onSelect={() => handleSelect('Share')} isDisabled>
            Share... (Disabled)
          </ContextMenu.Item>
          <ContextMenu.Item onSelect={() => handleSelect('Delete')}>
            Delete
          </ContextMenu.Item>
        </ContextMenu.Content>
      </ContextMenu>
    </View>
  );
};

Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

Scroll horizontally to see every column.

ContextMenu
Prop	Type	Default	Description
`children` Required	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Content rendered inside the component.Source
`items`	`ContextMenuItem[]`	`—`	Items displayed by the component.Source
`size`	`Size` `"sm""md""lg"`	`—`	Size preset for the component.Source
`variant`	`Variant` `"outline""default""filled"`	`—`	Visual treatment of the component.Source
`disableNativeContextMenu`	`boolean`	`—`	See the type and source declaration for this property.Source
`onOpenChange`	`((isOpen: boolean) => void)`	`—`	See the type and source declaration for this property.Source
`views`	`ContextMenuStyles`	`—`	Style overrides for the named internal parts.Source

ContextMenu.Trigger

Scroll horizontally to see every column.

ContextMenu.Trigger
Prop	Type	Default	Description
`children` Required	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Content rendered inside the component.Source
`disableNativeContextMenu`	`boolean`	`—`	See the type and source declaration for this property.Source
`asChild`	`boolean`	`—`	See the type and source declaration for this property.Source
`isDisabled`	`boolean`	`—`	Disables user interaction.Source
`views`	`{ container?: ViewProps; indicator?: ViewProps; }`	`—`	Style overrides for the named internal parts.Source

ContextMenu.Content

Scroll horizontally to see every column.

ContextMenu.Content
Prop	Type	Default	Description
`items`	`ContextMenuItem[]`	`—`	Items displayed by the component.Source
`children`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Content rendered inside the component.Source
`position`	`{ x: number; y: number; }`	`—`	Position of the element or notification.Source
`side`	`Position`	`—`	See the type and source declaration for this property.Source
`align`	`Alignment`	`—`	See the type and source declaration for this property.Source
`views`	`{ menu?: ViewProps; content?: ViewProps; item?: ViewProps; divider?: ViewProps; separator?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }`	`—`	Style overrides for the named internal parts.Source

ContextMenu.Item

Scroll horizontally to see every column.

ContextMenu.Item
Prop	Type	Default	Description
`item`	`ContextMenuItem`	`—`	See the type and source declaration for this property.Source
`children`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Content rendered inside the component.Source
`onSelect`	`((event: React.MouseEvent<HTMLButtonElement>) => void)`	`—`	See the type and source declaration for this property.Source
`isDisabled`	`boolean`	`—`	Disables user interaction.Source
`isExternal`	`boolean`	`—`	Opens an external link in a new browsing context.Source
`views`	`{ item?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }`	`—`	Style overrides for the named internal parts.Source
`color`	`string`	`—`	This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Syntax: `<color>` Initial value: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| 1 \| 1 \| 1 \| 12 \| 3 \|Source
`reversed`	`boolean`	`—`	See the type and source declaration for this property.Source
`to`	`string`	`—`	Destination URL or application route.Source
`keys`	`any[]`	`—`	See the type and source declaration for this property.Source
`shadow`	`ViewProps \| Shadow \| Elevation`	`—`	Shadow or elevation styling.Source
`animation`	`Animation`	`—`	This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. Syntax: `<single-animation>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :----: \| \| 43 \| 16 \| 9 \| 12 \| 10 \| \| 3 _-x-_ \| 5 _-x-_ \| 4 _-x-_ \| \| \|Source
`label`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Visible label describing this control.Source
`shape`	`Shape`	`—`	Shape preset for the component.Source
`size`	`Size`	`—`	Size preset for the component.Source
`variant`	`string`	`—`	Visual treatment of the component.Source
`ariaLabel`	`string`	`—`	[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)Source
`isLoading`	`boolean`	`—`	Displays the loading state.Source
`loaderProps`	`LoaderProps`	`—`	See the type and source declaration for this property.Source
`loaderPosition`	`LoaderPosition`	`—`	See the type and source declaration for this property.Source
`icon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Icon rendered alongside the content.Source
`iconPosition`	`IconPosition`	`—`	Position of the icon relative to the content.Source
`isFilled`	`boolean`	`—`	Expands the component to the available width.Source
`isAuto`	`boolean`	`—`	Sizes the component to fit its content.Source
`isIconRounded`	`boolean`	`—`	See the type and source declaration for this property.Source
`isIcon`	`boolean`	`—`	See the type and source declaration for this property.Source
`textColor`	`string`	`—`	Explicit foreground color for the text.Source
`borderMovingDuration`	`number`	`—`	See the type and source declaration for this property.Source
`borderMovingGradientColors`	`string[]`	`—`	See the type and source declaration for this property.Source
`animatedStrokeAccentColor`	`string`	`—`	See the type and source declaration for this property.Source
`animatedStrokeTextColor`	`string`	`—`	See the type and source declaration for this property.Source
`config`	`any`	`—`	See the type and source declaration for this property.Source
`leftIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`rightIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`startIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`endIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source

ContextMenu.Divider

Scroll horizontally to see every column.

ContextMenu.Divider
Prop	Type	Default	Description
`views`	`{ divider?: ViewProps; }`	`—`	Style overrides for the named internal parts.Source

ContextMenu.Separator

Scroll horizontally to see every column.

ContextMenu.Separator
Prop	Type	Default	Description
`views`	`{ separator?: ViewProps; }`	`—`	Style overrides for the named internal parts.Source

For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.

Usage guidance

Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
These previews run in the browser. Check React Native setup for platform requirements and differences.

Browse documentation source