Context Menu

This example shows a simple menu with buttons to duplicate or delete the clicked node.


import type { Edge, Node } from '@xyflow/vue';
 
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' },
];