Get Started
OverlaysUpdated May 3, 2026

ContextMenu

Right-click and keyboard context actions.

#Default usage

Context menuRight-click or use keyboard context menu controls on the trigger.

#Usage

Code
import {
  Button,
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger asChild><Button variant="secondary">Context target</Button></ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Open</ContextMenuItem>
        <ContextMenuItem>Duplicate</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem destructive>Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

#Accessibility

ContextMenu uses Radix behavior for menu semantics, keyboard access, roving focus, disabled items, and nested menus.

#API

  • ContextMenuItem supports destructive and inset.
  • Checkbox, radio, label, separator, sub-menu, and portal primitives are exported.
  • Trigger supports asChild.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page