# UI: ContextMenuPopover

> The popover of a context menu, opened at a point of the viewport.

Source: https://pithyx.org/docs/reference/sdk/ui/context-menu/
Markdown: https://pithyx.org/docs/reference/sdk/ui/context-menu.md

The popover of a context menu, opened at a point of the viewport. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Functions

### ContextMenuPopover()

```ts
function ContextMenuPopover(props): Element;
```

The popover of a context menu, opened at a point of the viewport. A second right-click while it is open moves the
menu there, or to whichever menu the element at that point opens.

#### Parameters

| Parameter        | Type                                                                                  | Description                                                                 |
| ---------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| `props`          | \{ `x`: `number`; `y`: `number`; `onClose`: () => `void`; `children`: `ReactNode`; \} | The point and the menu.                                                     |
| `props.x`        | `number`                                                                              | Horizontal position in the viewport, in CSS pixels (the event's `clientX`). |
| `props.y`        | `number`                                                                              | Vertical position in the viewport, in CSS pixels (the event's `clientY`).   |
| `props.onClose`  | () => `void`                                                                          | Called when the menu should close: Escape, a press outside, a picked entry. |
| `props.children` | `ReactNode`                                                                           | The menu, usually a `Menu`.                                                 |

#### Returns

`Element`

The popover, open until `onClose` removes it.

#### Example

```tsx
{
  menuAt && (
    <ContextMenuPopover x={menuAt.x} y={menuAt.y} onClose={() => setMenuAt(null)}>
      <Menu onAction={run}>
        <MenuItem id="rename">Rename</MenuItem>
      </Menu>
    </ContextMenuPopover>
  );
}
```