Context Menu

A high-quality, styled React context menu component built with @base-ui/react that appears at the pointer on right click or long press.

The ContextMenu component displays a contextual action menu triggered by right clicking or long pressing an active area.

Usage

import { ContextMenu } from "@/components/ui/context-menu";

export function ExampleContextMenu() {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger className="p-8 border border-dashed rounded-md">
        Right click here
      </ContextMenu.Trigger>
      <ContextMenu.Portal>
        <ContextMenu.Positioner>
          <ContextMenu.Popup>
            <ContextMenu.Item>Add to Library</ContextMenu.Item>
            <ContextMenu.Item>Add to Playlist</ContextMenu.Item>
            <ContextMenu.Separator />
            <ContextMenu.Item>Favorite</ContextMenu.Item>
          </ContextMenu.Popup>
        </ContextMenu.Positioner>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  );
}

Preview

Right click inside this box

Anatomy

import { ContextMenu } from "@base-ui/react/context-menu";

<ContextMenu.Root>
  <ContextMenu.Trigger />
  <ContextMenu.Portal>
    <ContextMenu.Positioner>
      <ContextMenu.Popup>
        <ContextMenu.Item />
        <ContextMenu.Separator />
        <ContextMenu.SubmenuRoot>
          <ContextMenu.SubmenuTrigger />
        </ContextMenu.SubmenuRoot>
      </ContextMenu.Popup>
    </ContextMenu.Positioner>
  </ContextMenu.Portal>
</ContextMenu.Root>;

API Reference

ContextMenu.Root Props

Prop	Type	Default	Description
`open`	`boolean`	`undefined`	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial uncontrolled open state.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Callback fired when open state changes.
`disabled`	`boolean`	`false`	Disables interaction with the context menu.