ContextMenu

Use ContextMenu

ContextMenu is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, ContextMenu, Surface } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ContextMenu label="Project actions" items={[{id:"rename",label:"Rename"},{id:"duplicate",label:"Duplicate"}]} onAction={id => console.log(id)}><Surface padding="6">Right-click or use Shift+F10.</Surface></ContextMenu>
    </FloodRoot>
  );
}

Design notes

• Right click opens at the pointer; ContextMenu or Shift+F10 opens near the actual focused target. The wrapper is keyboard-focusable and named.
• Uses the same Menu items, preferences, nested layers, typeahead and keyboard navigation. Leaf commands close the tree; Escape unwinds one level and restores the real source focus.
• disabled preserves the native browser context menu. Controlled open and onAction remain host-owned. Provide a visible Menu action as a primary alternative on touch devices. Introduced in 0.2.7.

API reference