Skip to main content
The ContextMenu component wraps the Gantt component and intercepts right-click events to show a context menu. Connect it to the chart via the shared api prop so built-in actions work automatically.

​
Basic setup

<script>
  import { Gantt, ContextMenu, Editor } from "@svar-ui/svelte-gantt";
  import { getData } from "./data";

  let api = $state();
  const data = getData();
</script>

<ContextMenu {api}>
  <Gantt
    bind:this={api}
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
    zoom
  />
</ContextMenu>
<Editor {api} />
Gantt must be a direct child (or descendant) of ContextMenu. The menu component listens to pointer events that bubble up from the chart.

​
ContextMenu props

​
api
IApi
The Gantt API object. Connects the menu so built-in actions are dispatched to the chart.
​
options
IOptionConfig[]
Array of menu item descriptors. Overrides the default option set.
​
onclick
({ context, action }) => void
Callback fired when a menu item is clicked. Receives the right-clicked task context and the selected action descriptor.

​
Default menu options

The defaultMenuOptions array and the getMenuOptions() helper give you a copy of the built-in option configuration: 
<script>
  import { defaultMenuOptions, getMenuOptions } from "@svar-ui/svelte-gantt";

  // static reference (do not mutate)
  console.log(defaultMenuOptions);

  // fresh copy with task-type sub-items populated
  const options = getMenuOptions();
</script>
Built-in option IDs:
IDDescription
add-taskSub-menu: add child, above, or below
add-task:childAdd a child task
add-task:beforeAdd a task above
add-task:afterAdd a task below
convert-taskSub-menu: convert to another task type
edit-taskOpen the editor for the task
cut-taskCut the task
copy-taskCopy the task
paste-taskPaste the clipboard task
move-task:upMove the task up
move-task:downMove the task down
indent-task:addIndent the task
indent-task:removeOutdent the task
delete-taskDelete the task

​
Customising the menu

Call getMenuOptions() to start from the defaults, then select the options you want and append custom items: 
<script>
  import { Gantt, ContextMenu, Editor, getMenuOptions } from "@svar-ui/svelte-gantt";
  import { getContext } from "svelte";
  import { getData } from "./data";

  const helpers = getContext("wx-helpers");
  let api = $state();
  const data = getData();

  // keep only the add-below and clipboard options
  const ids = ["cut-task", "copy-task", "paste-task", "delete-task"];
  let arr = [{ id: "add-task:after", text: "Add below", icon: "wxi-plus" }];
  arr = arr.concat(getMenuOptions().filter(op => ids.indexOf(op.id) >= 0));

  // append a custom action
  arr.push({
    id: "my-action",
    text: "My action",
    icon: "wxi-empty",
    handler: actionHandler,
  });

  const options = arr;

  function actionHandler() {
    helpers.showNotice({ text: "'My action' clicked" });
  }

  function onClick({ context, action }) {
    if (!action.handler)
      helpers.showNotice({
        text: `'${action.id}' clicked for the '${context.id}' task`,
      });
  }
</script>

<ContextMenu {api} {options} onclick={onClick}>
  <Gantt
    bind:this={api}
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
  />
</ContextMenu>
<Editor {api} />

​
Menu item config fields

​
id
string | number
Unique identifier for the item. When a built-in ID is used, the corresponding Gantt action is dispatched automatically on click.
​
text
string
Label displayed in the menu.
​
icon
string
Icon class name shown next to the label.
​
subtext
string
Secondary text displayed to the right of the label (typically a keyboard shortcut).
​
type
string
Set to "separator" to render a horizontal divider instead of a clickable item.
​
data
IOptionConfig[]
Nested array of options for creating sub-menus.
​
handler
() => void
Click handler for custom items. If provided, the handler is called instead of dispatching a Gantt action.
​
isDisabled
(task, state, target?) => boolean
Function returning true to disable the item for a particular task or state.
​
isHidden
(task, state, target?) => boolean
Function returning true to hide the item for a particular task or state.

Build docs developers (and LLMs) love

Get started for freeTalk to us