Fluxo UIFluxo UIv0.4.1

Context Menu

A positioned floating menu triggered by right-click or button click. Mount <ContextMenuManager /> once at your app root, then call showContextMenu() from any event handler.

Setup

App root
import { ContextMenuManager } from 'fluxo-ui';

function App() {
  return (
    <>
      <ContextMenuManager />
      {/* rest of app */}
    </>
  );
}

Right-click Context Menu

Right-click area

Right-click anywhere in the shaded area to open the context menu.

Right-click here
import { showContextMenu } from 'fluxo-ui';

const menuItems = [
  { label: 'Edit', icon: <EditIcon />, command: () => handleEdit() },
  { label: 'Duplicate', icon: <CopyIcon />, command: () => handleDuplicate() },
  { seperator: true },
  { label: 'Delete', icon: <TrashIcon />, command: () => handleDelete() },
];

<div onContextMenu={(e) => showContextMenu(e, menuItems)}>
  Right-click here
</div>

Button-triggered Menu

Click button to open menu

Use onClick instead of onContextMenu for button-triggered menus.

<Button onClick={(e) => showContextMenu(e as React.MouseEvent, menuItems)}>
  Open Menu
</Button>

Many Items with Scroll

Scrollable menu

Right-click to open a long menu. Hover near the top or bottom arrow to scroll without a scrollbar.

Right-click for long scrollable menu

Nested Sub-menus

Sub-menu items

Right-click to see nested menu items. Hover over 'Export' to reveal sub-options.

Right-click for nested menu
const menuItems = [
  { label: 'View Details', icon: <InfoIcon /> },
  {
    label: 'Export',
    icon: <DownloadIcon />,
    items: [
      { label: 'Export as CSV', command: () => exportCsv() },
      { label: 'Export as PDF', command: () => exportPdf() },
      { label: 'Export as JSON', command: () => exportJson() },
    ],
  },
  { seperator: true },
  { label: 'Delete', icon: <TrashIcon />, command: () => handleDelete() },
];

Table Row Context Menu

Per-row actions

Right-click on any row to see row-specific actions.

NameRoleStatus
Alice JohnsonAdminActive
Bob SmithEditorActive
Carol WhiteViewerInactive
rows.map((row) => (
  <tr
    key={row.id}
    onContextMenu={(e) =>
      showContextMenu(e, [
        { label: `Edit ${row.name}`, icon: <EditIcon />, command: () => handleEdit(row.id) },
        { seperator: true },
        { label: 'Delete', icon: <TrashIcon />, command: () => handleDelete(row.id) },
      ])
    }
  >
    ...
  </tr>
))

Import

import { ContextMenuManager, showContextMenu } from 'fluxo-ui';

API Reference

ContextMenuManager

No props required
—

ContextMenuManager is a singleton. Mount it once at the app root; it manages all context menu state internally.

showContextMenu(event, menus, options?)

eventreq
React.MouseEvent

The mouse event from onContextMenu or onClick. Used to position the menu.

menusreq
MenuItem[]

Array of menu items to display.

options
ContextMenuOptions

Optional configuration — currently supports placement (PlacementCorners).

MenuItem

label
string

Text shown for the menu item.

icon
ReactNode

Optional icon placed before the label.

command
(id?: any) => void

Callback invoked when the item is clicked.

separator
boolean

When true, renders a visual divider instead of a clickable item.

seperator
boolean

Deprecated. Misspelled alias for `separator` kept for backwards compatibility — prefer `separator` in new code.

items
MenuItemBase[]

Nested sub-menu items (one level deep).

id
any

Optional identifier passed to the command callback.

Features

Global Manager Pattern

Mount ContextMenuManager once at the app root and call showContextMenu() from any event handler — no prop drilling required.

Right-click & Click Trigger

Attach to onContextMenu for classic right-click behavior or to onClick for button-triggered dropdown-style menus.

Nested Sub-menus

Define items with an items array for one level of nested sub-menus that expand on hover — ideal for export or action groupings.

Scrollable Long Menus

Menus with many items automatically become scrollable with hover-triggered arrow controls — no scrollbar clutter.

Separators

Add visual dividers between menu groups by including an item with seperator: true to logically organize actions.

Icon Support

Each menu item supports an icon prop that accepts any ReactNode — use any icon component or custom SVG element.

Smart Viewport Positioning

The menu automatically repositions itself to stay within the viewport bounds regardless of where the right-click occurs.

Theming

Full dark/light mode and all 5 brand themes supported automatically via CSS custom properties.