TaskBoard - Context Menu

Enable card context-menu payloads and wire them to an application-owned menu.

#Usage

import ContextMenu from 'primevue/contextmenu';
import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" context-menu @card-context-menu="onCardContextMenu" @card-move="onCardMove">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

<ContextMenu ref="cardMenu" :model="cardMenuItems" />

Set context-menu on the root when cards should open a custom action menu. TaskBoard prevents the browser menu and emits @card-context-menu; the app decides whether that payload opens PrimeVue ContextMenu, a popover, a drawer, or a product-specific overlay.

FieldMeaning
cardTask object for the card that opened the menu.
columnColumn metadata for the card.
positionPointer coordinates used for menu placement.
jsEventOriginal mouse event.

Build the menu model from the active card, current column, board columns, selected cards, and permission state in the app. Product commands such as edit, duplicate, archive, assign, move, or delete should call app code, update the bound model, or call TaskBoard exposed methods from the menu command.

function onCardContextMenu(event) {
    activeCard.value = event.card;
    cardMenu.value?.show(event.jsEvent);
}

In external mode, menu actions should emit requests or update the external store. Do not rely on TaskBoard to mutate :items.

#Keyboard and Focus

Use the menu library's keyboard handling and close behavior. Custom menu items should be keyboard reachable and should return focus to a predictable board or toolbar target.

#Card Menu

The context-menu sample wires TaskBoard's right-click payload into a PrimeVue menu model with move, duplicate, archive, and permission-aware commands.

Loading Demo...