Context menu

Opens a menu of actions where people right-click, or long-press on touch, on part of the page, such as a row.

<script setup lang="ts">
import { type DropdownMenuGroup, FsButton, FsContextMenu, FsDropdownMenu } from '@fivespark/ui'
import { ref } from 'vue'

const gekozen = ref('')
const acties: DropdownMenuGroup[] = [
  [
    { label: 'Bewerken', icon: 'pencil', onSelect: () => { gekozen.value = 'Bewerken' } },
    { label: 'Dupliceren', icon: 'copy', onSelect: () => { gekozen.value = 'Dupliceren' } },
  ],
  [{ label: 'Verwijderen', icon: 'trash', danger: true, onSelect: () => { gekozen.value = 'Verwijderen' } }],
]
</script>

<template>
  <div class="min-h-72 w-full max-w-sm">
    <FsContextMenu label="Acties voor offerte 2026-041" :items="acties">
      <div class="flex items-start justify-between gap-4 rounded-region border border-border p-4">
        <div>
          <p class="type-body">Offerte 2026-041, Bakkerij De Vries</p>
          <p class="type-meta text-text-muted">Laatste keuze: {{ gekozen || 'geen' }}</p>
        </div>
        <FsDropdownMenu :items="acties">
          <FsButton icon="ellipsis" label="Acties voor offerte 2026-041" variant="ghost" size="dense" />
        </FsDropdownMenu>
      </div>
    </FsContextMenu>
  </div>
</template>

Usage

<script setup lang="ts">
import { FsContextMenu } from '@fivespark/ui'
</script>

<template>
  <FsContextMenu label="Acties voor offerte 2026-041" :items="[[{ label: 'Bewerken', onSelect: bewerken }]]">
    <div>Offerte 2026-041</div>
  </FsContextMenu>
</template>

items are the same groups as in the Dropdown menu. label names the open menu for screen readers and is never shown. The slot takes one element, the region. Empty items leave the browser's own menu. A context menu is a shortcut, never the only way to an action: give the same actions to a button that opens a Dropdown menu, as the example does.

Keyboard

Key	Does
Shift + F10, Menu	Opens the menu for the focused element, on platforms that send the context-menu event
↓, ↑	Moves between the items, wrapping at the ends
Home, End	Goes to the first or the last item
Letters	Jumps to the next item that starts with them
Enter, Space	Chooses the focused item
Esc	Closes the menu
Tab	Closes the menu and moves on

API Reference

FsContextMenu

Prop	Type	Default	Description
label	string	required	The open menu's name, never shown: what it acts on, in the words of the visible menu's button, "Acties voor offerte 2026-041".
items	DropdownMenuGroup[]	required	FsDropdownMenu's groups, the same list as the visible way to these actions. Empty leaves the browser's menu.

Slot	Props	Description
default	any	The one element the menu belongs to: a table row, a list item, a card.