Skip to main content

ContextMenu

ContextMenu

Right-click (or long-press) menu for an area, with the same items as DropdownMenu

Tags: component menu context-menu

View Demo

ContextMenu opens a menu where the user right-clicks (or long-presses on touch) inside an area. It takes the same items as DropdownMenu: items, groups, separators, labels, checkbox items, icons, shortcuts and destructive items.

Import​

<script>
  import { ContextMenu } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  const items = [
    { label: 'Rename', icon: 'edit', shortcut: 'F2', onSelect: rename },
    { label: 'Duplicate', onSelect: duplicate },
    { type: 'separator' },
    { label: 'Delete', icon: 'trash', destructive: true, onSelect: remove },
  ];
</script>

<ContextMenu {items} triggerClass="block rounded-md border border-dashed p-8">
  Right-click here
</ContextMenu>

To build items for whatever was clicked, record the target in an oncontextmenu handler on an element inside the area (it runs before the menu opens) and derive items from it.

Props​

Prop Type Default Description
items (DropdownMenuItem | DropdownMenuGroup)[] required Menu items, the same shape as DropdownMenu's
children Snippet required The area that opens the menu on right-click (or long-press)
open boolean false Whether the menu is open (bindable)
onOpenChange (open: boolean) => void - Called when the menu opens or closes
disabled boolean false Leave the browser's own menu in place
triggerClass string - Classes for the trigger area
class string - Classes for the menu
onCloseAutoFocus (event: Event) => void - As the menu closes; preventDefault() keeps focus where a chosen item put it (e.g. in a dialog it opened)

Accessibility​

  • The menu is a menu with menuitems: arrow keys move, Enter selects, Escape closes and type-ahead jumps to an item.
  • A right-click menu cannot be reached from the keyboard. Make sure every action in it is also available another way, such as a button, a DropdownMenu or a keyboard shortcut, and show that shortcut on the item with shortcut.
On this page