ContextMenu

A right-click menu over any content — opens the shared Menu at the pointer. Composes Menu + MenuItem[].

Right-click the area

Right-click anywhere in this box

<script>
  import { ContextMenu } from '@spaethtech/svelte-ui';
  const items = [
    { label: 'Open', onclick: () => {} },
    { label: 'Delete', danger: true, onclick: () => {} },
  ];
</script>

<ContextMenu {items}>
  <div>Right-click me</div>
</ContextMenu>

Dynamic items (built from the target)

Pass items a function of the event: one ContextMenu serves many targets — it reads the right-clicked element and returns that target's menu (return [] to show nothing). This is how a Tree or file list drives a single wrapping menu.

report.pdf

photo.jpg

notes.txt

Right-click a file for its menu — or empty space for no menu.

<script>
  import { ContextMenu } from '@spaethtech/svelte-ui';
  import type { MenuItem } from '@spaethtech/svelte-ui';

  const files = ['report.pdf', 'photo.jpg', 'notes.txt'];

  // One wrapper, menu per target: read the clicked element, return its items ([] = no menu).
  function itemsFor(e: MouseEvent): MenuItem[] {
    const name = (e.target as HTMLElement).closest('[data-file]')?.dataset.file;
    if (!name) return [];
    return [
      { label: `Open ${name}`, onclick: () => {} },
      { label: `Delete ${name}`, danger: true, onclick: () => {} },
    ];
  }
</script>

<ContextMenu items={itemsFor}>
  {#each files as f}<div data-file={f}>{f}</div>{/each}
</ContextMenu>