Skip to main content
The <ContextMenu> component provides a right-click context menu for the Gantt chart. Wrap <Gantt> as a child of <ContextMenu> — it intercepts right-click events on task bars and grid rows and shows the menu at the cursor position.

​
Import

import { ContextMenu, getMenuOptions, defaultMenuOptions } from '@svar-ui/react-gantt';

​
Basic usage

import { useState } from 'react';
import { Gantt, ContextMenu, Editor } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

export default function App() {
  const [api, setApi] = useState(null);

  return (
    <>
      <ContextMenu api={api}>
        <Gantt
          init={setApi}
          tasks={tasks}
          links={links}
          scales={scales}
        />
      </ContextMenu>
      {api && <Editor api={api} />}
    </>
  );
}

​
Props

​
api
IApi
The Gantt API instance. Required to resolve tasks, read state, and dispatch actions from menu items.
​
options
IMenuOption[]
default:"[]"
Custom menu item definitions. When non-empty, replaces the default menu entirely. When empty, items are generated automatically from getMenuOptions() based on the current Gantt state.
interface IMenuOption {
  id: string;
  text?: string;
  icon?: string;
  subtext?: string;
  handler?: (item: IMenuOption) => void;
  data?: IMenuOption[];  // submenu items
  isDisabled?: (task: ITask, state: IConfig, activeId?: any) => boolean;
  isHidden?: (task: ITask, state: IConfig, activeId?: any) => boolean;
}
​
resolver
(id: any, event: MouseEvent) => boolean | ITask
Custom function that resolves which task a right-click event belongs to. Receives the raw data-id attribute value and the original mouse event. Return the task object to use, return true to fall back to the default task lookup, or return a falsy value to suppress the menu.
​
filter
(option: IMenuOption, task: ITask) => boolean
Function called for each menu item before the menu is shown. Return false to hide the item for the given task.
​
onClick
(ev: { action: IMenuOption; context: ITask }) => void
Callback fired whenever a menu item is clicked. Called after any built-in action handler runs.
​
at
string
default:"'point'"
Positioning mode passed to the underlying menu widget. 'point' places the menu at the cursor.
​
css
string
Additional CSS class names applied to the menu container.
​
children
ReactNode
The content to wrap — typically the <Gantt> component. Right-click events within this subtree trigger the menu.

​
Helper functions

​
getMenuOptions(options?)

Returns the default menu item configuration array. 
function getMenuOptions(options?: {
  splitTasks?: boolean;
  taskTypes?: ITaskType[];
  summary?: object;
}): IMenuOption[]

​
defaultMenuOptions

The static default menu options array. Useful as a reference for the available item IDs. 
import { defaultMenuOptions } from '@svar-ui/react-gantt';

​
Default menu items

IDDescription
add-task:beforeAdd a task above
add-task:afterAdd a task below
add-task:childAdd a child task
cut-taskCut the task
copy-taskCopy the task
paste-taskPaste task
delete-taskDelete the task
split-taskSplit the task (PRO)

​
Customizing menu items

​
Filtering and extending default options

import { useState, useMemo } from 'react';
import { Gantt, ContextMenu, Editor, getMenuOptions } from '@svar-ui/react-gantt';

export default function App() {
  const [api, setApi] = useState();

  const options = useMemo(() => {
    // Keep only a subset of the default options
    const keep = ['cut-task', 'copy-task', 'paste-task', 'delete-task'];
    const items = [
      // Prepend a custom item
      { id: 'add-task:after', text: 'Add below', icon: 'wxi-plus' },
      ...getMenuOptions().filter((op) => keep.includes(op.id)),
      // Append a custom action
      {
        id: 'my-action',
        text: 'My action',
        icon: 'wxi-empty',
        handler: () => alert('Custom action!'),
      },
    ];
    return items;
  }, []);

  return (
    <>
      <ContextMenu api={api} options={options}>
        <Gantt init={setApi} tasks={tasks} />
      </ContextMenu>
      {api && <Editor api={api} />}
    </>
  );
}

​
Filtering by task type

Use the filter prop to hide specific items for certain task types: 
import { useCallback } from 'react';

const filter = useCallback((option, task) => {
  // Disable 'Add child' for milestones
  if (task.type === 'milestone') {
    const ids = option.id?.toString().split(':');
    if (ids?.[0] === 'add-task' && ids[1] === 'child') return false;
  }
  return true;
}, []);

<ContextMenu api={api} filter={filter}>
  <Gantt init={setApi} tasks={tasks} />
</ContextMenu>

​
Handling menu clicks

Use the onClick prop to respond to any menu action, including custom items: 
function onClick({ action, context: task }) {
  if (action.id === 'my-action') {
    console.log('Custom action on task:', task.id);
  }
}

<ContextMenu api={api} onClick={onClick}>
  <Gantt init={setApi} tasks={tasks} />
</ContextMenu>

​
Custom task resolver

By default the menu resolves which task was right-clicked by reading a data-id attribute from the DOM. Use resolver to override this behaviour: 
// Only show the menu for tasks with an id greater than 2
const resolver = useCallback((id) => {
  return id > 2;
}, []);

<ContextMenu api={api} resolver={resolver}>
  <Gantt init={setApi} tasks={tasks} />
</ContextMenu>

Build docs developers (and LLMs) love

Get started for freeTalk to us