ContextMenu

Right-click menu wrapper that resolves the clicked card and dispatches built-in actions. Wrap your <Kanban> in <ContextMenu> to get edit, duplicate, and delete on right-click with zero configuration. Extend it with custom entries and gate it per card.

The same menu instance also backs the per-card ... button when card.menu is enabled on <Kanban>.

Usage

import { ContextMenu } from "@svar-uisvelte-kanban";

Props

Prop	Type	Default	Description
api	KanbanInstanceApi | null	null	Kanban instance for card lookup and action dispatch. Falls back to internal context if omitted.
options	any[]	[]	Menu items. Falls back to getMenuOptions() when empty.
resolver	(card: KanbanCard, ev: MouseEvent) => any | null	null	Gate called after card resolution. Return falsy to suppress the menu for that card.
filter	(item: any, card: KanbanCard) => boolean | null	null	Per-item visibility filter. Return false to hide an item for the current card.
at	string	"point"	Menu placement mode.
onclick	(e: any) => void	undefined	Fires after built-in handling. Receives { action, context } where action.id is the item id.
css	string	undefined	Extra CSS class forwarded to the inner menu.
children	Snippet	-	Wrapped content, typically <Kanban>.

Methods

Method	Signature	Description
show	show(ev: Event, obj?: any)	Opens the menu programmatically. Use from a custom trigger button.

Built-in item IDs

ID	Text	Dispatches
edit-card	Edit card	select-card with card id
duplicate-card	Duplicate card	duplicate-card with card id
delete-card	Delete card	delete-card with card id

Custom item IDs don't auto-dispatch. Handle them in onclick.

Example

Default right-click menu:

<ContextMenu {api}>
  <Kanban bind:this={api} {cards} {columns} />
</ContextMenu>
{#if api}<Editor {api} />{/if}

Extended menu with a custom action:

<script>
  import { Kanban, ContextMenu, getMenuOptions } from "@svar-uisvelte-kanban";

  let api = $state();
  const options = [
    ...getMenuOptions(),
    { id: "archive", text: "Archive", icon: "wxi-empty" },
  ];

  function onclick({ action }) {
    if (action.id === "archive") {
      api.exec("update-card", {
        id: action.context.id,
        card: { archived: true },
      });
    }
  }
</script>

<ContextMenu {api} {options} {onclick}>
  <Kanban bind:this={api} {cards} {columns} />
</ContextMenu>

Gated menu - block for read-only cards, hide delete for locked cards:

<ContextMenu
  {api}
  resolver={(card) => !card.readOnly}
  filter={(item, card) => !(card.locked && item.id === "delete-card")}
>
  <Kanban bind:this={api} {cards} {columns} />
</ContextMenu>

Related

• Card menu guide — right-click menu, per-card button, custom items
• getMenuOptions — default menu items
• card — enable the per-card menu button via card.menu