---
title: Context menu
description: ContextMenu provides a right-click menu with contextual actions.
category: Overlays
related: [Dropdown, Menu, Button]
commonPatterns: [right-click-menu, table-context-menu]
---

Source: https://clickhouse.design/click-ui/contextmenu

# Context menu

ContextMenu offers a familiar right-click (or long-press) experience to surface actions related to the element the user interacts with. Perfect for table rows, list items, and other interactive elements.

## Example

## Props

| Prop      | Type                                     | Default value | Description                                                      |
| --------- | ---------------------------------------- | ------------- | ---------------------------------------------------------------- |
| disabled  | `boolean`                                | `false`       | Whether the context menu trigger is disabled                     |
| showArrow | `boolean`                                | `false`       | Whether to display an arrow pointing to the trigger element      |
| side      | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'`     | Side of the trigger element where the context menu should appear |

```tsx
import { ContextMenu, Button } from '@clickhouse/click-ui'

function MyContextMenu() {
return (
  <ContextMenu>
    <ContextMenu.Trigger>
      <Button type="secondary" label="Right-click me" />
    </ContextMenu.Trigger>
    <ContextMenu.Content side="right" showArrow>
      <ContextMenu.Item>Copy</ContextMenu.Item>
      <ContextMenu.Item>Paste</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu>
)
}
```

## Quick start

```tsx
import { ContextMenu, Button } from '@clickhouse/click-ui'

function MyContextMenu() {
return (
  <ContextMenu>
    <ContextMenu.Trigger>
      <Button type="secondary" label="Right-click me" />
    </ContextMenu.Trigger>
    <ContextMenu.Content side="right" showArrow>
      <ContextMenu.Item>Copy</ContextMenu.Item>
      <ContextMenu.Item>Paste</ContextMenu.Item>
      <ContextMenu.Item>Delete</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu>
)
}
```

## Related components

- **Dropdown**: For click-triggered menus instead of right-click.
- **Button**: Commonly used as a context menu trigger.

## Common use cases

### Right-click menu

```tsx
import { ContextMenu, Button } from '@clickhouse/click-ui'

function RightClickMenu() {
return (
  <ContextMenu>
    <ContextMenu.Trigger>
      <Button type="secondary" label="Right-click me" />
    </ContextMenu.Trigger>
    <ContextMenu.Content side="right" showArrow>
      <ContextMenu.Item>Edit</ContextMenu.Item>
      <ContextMenu.Item>Delete</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu>
)
}
```

### With submenu

```tsx
import { ContextMenu, Button } from '@clickhouse/click-ui'

function ContextMenuWithSubmenu() {
return (
  <ContextMenu>
    <ContextMenu.Trigger>
      <Button type="secondary" label="Right-click me" />
    </ContextMenu.Trigger>
    <ContextMenu.Content side="right" showArrow>
      <ContextMenu.Item>Copy</ContextMenu.Item>
      <ContextMenu.Sub>
        <ContextMenu.SubTrigger>More…</ContextMenu.SubTrigger>
        <ContextMenu.Content sub side="right">
          <ContextMenu.Item>Sub Action 1</ContextMenu.Item>
          <ContextMenu.Item>Sub Action 2</ContextMenu.Item>
        </ContextMenu.Content>
      </ContextMenu.Sub>
    </ContextMenu.Content>
  </ContextMenu>
)
}
```