# ContextMenu

> A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Navigation
- Tags: menu, context-menu, right-click, compound, submenu, accessibility
- Dependencies: dropdown-menu
- Docs: https://fancy-ui.rama.app/docs/components/context-menu
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/context-menu

## Import

```svelte
<script lang="ts">
  import { ContextMenu } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { ContextMenu } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | `false` | Whether the menu is open. Bindable |
| `onOpenChange` | `(open: boolean) => void` | — | Called whenever the menu opens or closes, however it happened |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Side of the pointer to place the menu on. Flips when it would overflow |
| `align` | `"start" \| "center" \| "end"` | `"start"` | Alignment along the pointer's cross axis |
| `offset` | `number` | `2` | Gap in pixels between the pointer and the menu |
| `loop` | `boolean` | `true` | Whether arrow-key navigation wraps at the ends |
| `sound` | `boolean` | `false` | Plays open/close on the menu and its submenus and select on an item, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | The ContextMenuTrigger and ContextMenuContent |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import {
		ContextMenu,
		ContextMenuTrigger,
		ContextMenuContent,
		ContextMenuItem,
		ContextMenuSeparator,
	} from "fancy-ui-svelte";
</script>

<ContextMenu sound>
	<ContextMenuTrigger>
		<div
			class="border-border text-muted-foreground flex h-[140px] w-full items-center justify-center rounded-[10px] border border-dashed text-[13px]"
		>
			Right-click here
		</div>
	</ContextMenuTrigger>
	<ContextMenuContent>
		<ContextMenuItem onSelect={() => console.log("back")}>Previous</ContextMenuItem>
		<ContextMenuItem onSelect={() => console.log("forward")}>Next</ContextMenuItem>
		<ContextMenuItem onSelect={() => console.log("reload")}>Reload</ContextMenuItem>
		<ContextMenuSeparator />
		<ContextMenuItem onSelect={() => console.log("save")}>Save page…</ContextMenuItem>
	</ContextMenuContent>
</ContextMenu>
```

### With Submenu

A nested submenu inside a context menu, using the same Sub primitives as DropdownMenu.

```svelte
<script lang="ts">
	import {
		ContextMenu,
		ContextMenuTrigger,
		ContextMenuContent,
		ContextMenuItem,
		ContextMenuSeparator,
		ContextMenuSub,
		ContextMenuSubTrigger,
		ContextMenuSubContent,
	} from "fancy-ui-svelte";
</script>

<ContextMenu sound>
	<ContextMenuTrigger>
		<div
			class="border-border text-muted-foreground flex h-[140px] w-full items-center justify-center rounded-[10px] border border-dashed text-[13px]"
		>
			Right-click here
		</div>
	</ContextMenuTrigger>
	<ContextMenuContent>
		<ContextMenuItem onSelect={() => console.log("back")}>Previous</ContextMenuItem>
		<ContextMenuItem onSelect={() => console.log("reload")}>Reload</ContextMenuItem>
		<ContextMenuSeparator />
		<ContextMenuSub>
			<ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
			<ContextMenuSubContent>
				<ContextMenuItem onSelect={() => console.log("screenshot")}>Screenshot</ContextMenuItem>
				<ContextMenuItem onSelect={() => console.log("inspect")}>Inspect</ContextMenuItem>
			</ContextMenuSubContent>
		</ContextMenuSub>
	</ContextMenuContent>
</ContextMenu>
```

### Disabled Items

Disabled rows are skipped by keyboard navigation and inert to click.

```svelte
<script lang="ts">
	import {
		ContextMenu,
		ContextMenuTrigger,
		ContextMenuContent,
		ContextMenuItem,
	} from "fancy-ui-svelte";
</script>

<ContextMenu sound>
	<ContextMenuTrigger>
		<div
			class="border-border text-muted-foreground flex h-[140px] w-full items-center justify-center rounded-[10px] border border-dashed text-[13px]"
		>
			Right-click here
		</div>
	</ContextMenuTrigger>
	<ContextMenuContent>
		<ContextMenuItem onSelect={() => console.log("back")}>Previous</ContextMenuItem>
		<ContextMenuItem disabled onSelect={() => console.log("forward")}>Next</ContextMenuItem>
		<ContextMenuItem onSelect={() => console.log("reload")}>Reload</ContextMenuItem>
	</ContextMenuContent>
</ContextMenu>
```