Source: https://app-studio-6167b.web.app/docs/ContextMenu

@app-studio/components

# ContextMenu

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

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu.tsx)

## Import

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

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

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

```jsx
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.

**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](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L14) |
| `items` | `ContextMenuItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L16) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L18) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L20) |
| `disableNativeContextMenu` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L22) |
| `onOpenChange` | `((isOpen: boolean) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L24) |
| `views` | `ContextMenuStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L26) |

### ContextMenu.Trigger

**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](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L32) |
| `disableNativeContextMenu` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L34) |
| `asChild` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L36) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L38) |
| `views` | `{ container?: ViewProps; indicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L40) |

### ContextMenu.Content

**ContextMenu.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `ContextMenuItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L49) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L51) |
| `position` | `{ x: number; y: number; }` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L53) |
| `side` | `Position` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L55) |
| `align` | `Alignment` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L57) |
| `views` | `{ menu?: ViewProps; content?: ViewProps; item?: ViewProps; divider?: ViewProps; separator?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L59) |

### ContextMenu.Item

**ContextMenu.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` | `ContextMenuItem` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L79) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L81) |
| `onSelect` | `((event: React.MouseEvent<HTMLButtonElement>) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L83) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L85) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L87) |
| `views` | `{ item?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L89) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L62) |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L75) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L21) |
| `keys` | `any[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L97) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L49) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L59) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L99) |
| `shape` | `Shape` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L51) |
| `size` | `Size` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L47) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L56) |
| `ariaLabel` | `string` | `—` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L53) |
| `isLoading` | `boolean` | `—` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L23) |
| `loaderProps` | `LoaderProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L25) |
| `loaderPosition` | `LoaderPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L27) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L29) |
| `iconPosition` | `IconPosition` | `—` | Position of the icon relative to the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L31) |
| `isFilled` | `boolean` | `—` | Expands the component to the available width.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L35) |
| `isAuto` | `boolean` | `—` | Sizes the component to fit its content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L37) |
| `isIconRounded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L39) |
| `isIcon` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L45) |
| `textColor` | `string` | `—` | Explicit foreground color for the text.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L65) |
| `borderMovingDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L78) |
| `borderMovingGradientColors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L79) |
| `animatedStrokeAccentColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L85) |
| `animatedStrokeTextColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L86) |
| `config` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L95) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L101) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L103) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L105) |
| `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](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L107) |

### ContextMenu.Divider

**ContextMenu.Divider**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ divider?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L100) |

### ContextMenu.Separator

**ContextMenu.Separator**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ separator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L107) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). 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](https://app-studio-6167b.web.app/docs/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](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.