Skip to content
RefineUI

Context Menu

A menu opened from a right click.

Installation

Section titled “Installation”
npm install @refineui/react @refineui/tokens

Usage

Section titled “Usage”
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuPortal,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from "@refineui/react";


<ContextMenu>
  <ContextMenuTrigger asChild>
    <div>Right click</div>
  </ContextMenuTrigger>
  <ContextMenuPortal>
    <ContextMenuContent>
      <ContextMenuItem onSelect={() => copy()}>Copy</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuSub>
        <ContextMenuSubTrigger>More</ContextMenuSubTrigger>
        <ContextMenuPortal>
          <ContextMenuSubContent>
            <ContextMenuItem>Rename</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuPortal>
      </ContextMenuSub>
    </ContextMenuContent>
  </ContextMenuPortal>
</ContextMenu>

onSelect receives an event. Call preventDefault() on it to keep the menu open. Disabled items do not select.