ContextMenu

Replaces the browser's context menu over a region with a Menu.

Opens on right-click, on Shift+F10 or the ContextMenu key (under the focused element), and on a touch long-press. Everything after that is Menu's contract: roving focus, Escape closes, focus returns to where it was.

Actions · two-way: bind:open · keyboard contract

<script lang="ts">
	import { ContextMenu } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
items required	MenuItem[] | ((target: Element) => MenuItem[])	—	The menu. A function gets the element that was right-clicked or focused, so one ContextMenu can serve a whole list. An empty array lets the browser's own menu through.
open bind:	boolean	false	Two-way; true while the menu is showing.
disabled	boolean	false	Leave the browser's own menu in place.
longPressDelay	number	500	How long a touch must be held to open the menu, ms.
menuClass	string	—	Classes for the menu panel; class goes on the region.
children required	Snippet	—	The region the menu belongs to.

Everything not listed above is spread onto the underlying element (HTMLAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.

Keyboard

Key	Does
Shift+F10 / ContextMenu	open under the focused element inside the region
↑ / ↓	roving focus between items
Home / End	first / last item
Enter / Space	activate the focused item
Escape / Tab	close, focus returns to where it was

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<script lang="ts">
	import { ContextMenu, type MenuItem } from '$lib/index.js';
	import { FileText, Pencil, Copy, Trash2 } from '@lucide/svelte';

	const items: MenuItem[] = [
		{ label: 'Rename', icon: Pencil, onselect: () => {} },
		{ label: 'Duplicate', icon: Copy, hint: '⌘D', onselect: () => {} },
		{ label: 'Delete', icon: Trash2, danger: true, separatorBefore: true, onselect: () => {} }
	];
</script>

<div class="p-8">
	<ContextMenu {items} class="w-72">
		<div class="bg-card flex items-center gap-3 rounded-lg border p-3 text-sm">
			<FileText class="text-muted-foreground size-5" />
			<span>quarterly-report.pdf</span>
		</div>
	</ContextMenu>
</div>

Actions · Button · ButtonGroup · CopyButton · Toggle · Menu

---

← All components · Getting started · Theming · source