# ContextMenu

```ts
import { openContextMenu } from 'cx/widgets';
```



Context menus appear at the mouse position when the user right-clicks. Use the `openContextMenu` helper function to create and display a context menu with minimal code.

```tsx
import { openContextMenu, Menu, MenuItem } from "cx/widgets";

export default (
  <div
    style={{
      padding: "40px",
      border: "1px dashed #ccc",
      textAlign: "center",
      cursor: "context-menu",
    }}
    onContextMenu={(e, instance) => {
      openContextMenu(
        e,
        <Menu>
          <MenuItem autoClose onClick={() => {}}>Cut</MenuItem>
          <MenuItem autoClose onClick={() => {}}>Copy</MenuItem>
          <MenuItem autoClose onClick={() => {}}>Paste</MenuItem>
          <MenuItem autoClose onClick={() => {}} disabled>Delete</MenuItem>
        </Menu>,
        instance
      );
    }}
  >
    Right-click here to open context menu
  </div>
);

```

The `openContextMenu` function takes three arguments:
- The mouse event (to get the click position and prevent default behavior)
- The menu content (typically a `Menu` with `MenuItem` children)
- The instance (accessed via `e.instance`) — this allows the menu to access the store and controller methods

## Grid Context Menus

Context menus are commonly used with grids for row and column actions. Use `onRowContextMenu` for row menus and `onContextMenu` on column definitions for header menus.

```tsx
import { createModel } from "cx/data";
import { openContextMenu, Menu, MenuItem, Grid } from "cx/widgets";

interface PageModel {
  records: { id: number; name: string; value: number }[];
}

const m = createModel<PageModel>();

export default (
  <Grid
    records={[
      { id: 1, name: "Item 1", value: 100 },
      { id: 2, name: "Item 2", value: 200 },
      { id: 3, name: "Item 3", value: 300 },
    ]}
    columns={[
      {
        header: "Name",
        field: "name",
      },
      {
        header: "Value",
        field: "value",
        align: "right",
      },
    ]}
    onColumnContextMenu={(e, instance) => {
      openContextMenu(
        e,
        <Menu>
          <MenuItem autoClose>Sort A-Z</MenuItem>
          <MenuItem autoClose>Sort Z-A</MenuItem>
          <hr />
          <MenuItem autoClose>Hide Column</MenuItem>
        </Menu>,
        instance,
      );
    }}
    onRowContextMenu={(e, instance) => {
      openContextMenu(
        e,
        <Menu>
          <MenuItem autoClose>Edit</MenuItem>
          <MenuItem autoClose>Duplicate</MenuItem>
          <hr />
          <MenuItem autoClose>Delete</MenuItem>
        </Menu>,
        instance,
      );
    }}
  />
);

```

Use `<hr />` elements to add visual separators between menu groups.

## openContextMenu

```ts
openContextMenu(
  event: MouseEvent,
  content: any,
  instance?: Store | Instance,
  options?: object
): Promise
```

| Argument | Description |
| -------- | ----------- |
| `event` | The mouse event from `onContextMenu`. Used to position the menu and prevent default browser context menu. |
| `content` | Menu content — typically a `Menu` with `MenuItem` children. |
| `instance` | Instance for data binding and controller access. Access via `e.instance`. |
| `options` | Optional configuration passed to the dropdown. |

## Configuration

`ContextMenu` extends `Dropdown` with these defaults:

| Property | Default | Description |
| -------- | ------- | ----------- |
| `trackMouse` | `true` | Position menu at cursor location. |
| `dismissOnFocusOut` | `true` | Close when focus leaves the menu. |
| `autoFocus` | `true` | Focus the menu when opened. |
| `placementOrder` | `"down-right right up-right..."` | Preferred placement directions. |