ContextMenu

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

Quick Start

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>
)
}

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

Common Use Cases

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

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>
)
}

Dropdown Alert