Skip to main content

getMenuOptions

Returns the default card context menu items: Edit card, Duplicate card, and Delete card. Each item carries a built-in id that the ContextMenu wrapper automatically routes to the matching kanban action.

Use this as a starting point when you want to extend the menu with custom items without losing the defaults.

Usage​

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

getMenuOptions(): { id: string; text: string; icon: string }[];

Returns:

[
	{ id: "edit-card", text: "Edit card", icon: "wxi-edit" },
	{ id: "duplicate-card", text: "Duplicate card", icon: "wxi-content-copy" },
	{ id: "delete-card", text: "Delete card", icon: "wxi-delete" },
];

Built-in ids dispatch their store actions automatically even when passed through a custom options array. Custom ids are surfaced only through the onclick callback.

Example​

Use the defaults as-is:

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

  let api;
</script>

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

Extend with a custom item:

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

  let api;

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

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

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