Context Menu

You can add a custom context menu to nodes and edges by using the onNodeContextMenu and onEdgeContextMenu events. This example shows how to implement a context menu that appears when right-clicking on nodes or edges.


import type { Node, Edge } from '@xyflow/svelte';
 
export const initialNodes: Node[] = [
  {
    id: '1',
    position: { x: 175, y: 0 },
    data: { label: 'a' },
  },
  {
    id: '2',
    position: { x: 0, y: 250 },
    data: { label: 'b' },
  },
  {
    id: '3',
    position: { x: 175, y: 250 },
    data: { label: 'c' },
  },
  {
    id: '4',
    position: { x: 350, y: 250 },
    data: { label: 'd' },
  },
];
 
export const initialEdges: Edge[] = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
  },
  {
    id: 'e1-4',
    source: '1',
    target: '4',
  },
];