(autogenerated)

Svelte 4 Context Menu

A customizable context menu and submenu component library for Svelte 4, supporting nested menus, dividers, and flexible option handling.

Features

• Context menus: Right-click to open custom menus anywhere in your app.
• Submenus: Nested options with automatic boundary detection.
• Dividers: Visual separation between menu groups.
• Custom actions: Pass functions and arguments for each menu item.
• Svelte stores: Internal state management for active menus.

Installation

npm install @jeremymwan/svelte4-contextmenu

Usage

Import the components in your Svelte files:

<script lang="ts">
  import { ContextMenu } from "@jeremymwan/svelte4-contextmenu";
  import type { ContextMenuOption } from "@jeremymwan/svelte4-contextmenu/dist/util/interfaces";
  import { dividerContextOption } from "@jeremymwan/svelte4-contextmenu/dist/util/dividerContextOption";

  let count = 0;
  function addCount(num = 1) { count += num; }
  // ...other handlers...

  const options: ContextMenuOption[] = [
    { name: 'Add', func: addCount, submenu: [/* ... */] },
    dividerContextOption,
    // ...other options...
  ];
</script>

<ContextMenu {options}>
  <div>
    <!-- Your content here -->
  </div>
</ContextMenu>

API

ContextMenu

• options: Array of ContextMenuOption objects.
• args: Arguments passed to menu item functions.
• isOpen: Control menu visibility (optional).
• useWindowBoundary: Prevent menu overflow (optional).

ContextMenuOption Used internally for nested menus. ContextMenuOption See ContextMenuOption for full type definition.