Neumorphism UI

Context Menu

Use ContextMenu for commands related to an item or region opened from its context menu gesture.

Preview

Document context actions

Open the document-tools context menu, try its local undo command, and toggle the advanced-settings checkbox.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/context-menu

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Wrap the target with ContextMenuTrigger and compose labeled items in ContextMenuContent. Keep essential commands available through visible controls as well.

"use client";

import { useState } from "react";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu";

export default function Example() {
  const [message, setMessage] = useState("Right-click the document.");
  return (
    <div>
      <ContextMenu>
        <ContextMenuTrigger className="block p-6">Document</ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem onClick={() => setMessage("Document duplicated.")}>Duplicate</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <p role="status">{message}</p>
    </div>
  );
}

API Reference

Preserves Base UI pointer anchoring and keyboard navigation while rendering the popup as a floating neumorphic surface. Compose ordinary, checkable, radio, submenu, and destructive items.

ComponentPropTypeDefaultDescription
ContextMenuopen / onOpenChangeboolean / (open: boolean) => void—Controls the menu open state.
ContextMenuContentside / align / sideOffsetPositioner props—Adjusts popup placement and spacing relative to the pointer anchor.
ContextMenuItemdisabledbooleanfalseKeeps an item visible while preventing execution.
ContextMenuCheckboxItemchecked / onCheckedChangeboolean / (checked: boolean) => void—Controls the state of a checkable menu item.
ContextMenuRadioGroupvalue / onValueChangestring / (value: string) => void—Controls the selection among mutually exclusive radio items.

Accessibility

  • 01

    Make the ContextMenuTrigger region an understandable target for both pointer and keyboard users.

  • 02

    When open, arrow keys move between items, Enter or Space activates one, and Escape closes the menu.

  • 03

    Describe destructive actions explicitly instead of relying on color alone.