Context Menu

Displays a menu of actions triggered by a right click.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor

<script lang="ts">
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
 
	let showBookmarks = $state(true);
	let showFullURLs = $state(false);
	let value = $state("pedro");
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content class="w-48">
		<ContextMenu.Group>
			<ContextMenu.Item>
				Back
				<ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item disabled>
				Forward
				<ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Reload
				<ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Sub>
				<ContextMenu.SubTrigger>More Tools</ContextMenu.SubTrigger>
				<ContextMenu.SubContent class="w-44">
					<ContextMenu.Group>
						<ContextMenu.Item>Save Page...</ContextMenu.Item>
						<ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
						<ContextMenu.Item>Name Window...</ContextMenu.Item>
					</ContextMenu.Group>
					<ContextMenu.Separator />
					<ContextMenu.Group>
						<ContextMenu.Item>Developer Tools</ContextMenu.Item>
					</ContextMenu.Group>
					<ContextMenu.Separator />
					<ContextMenu.Group>
						<ContextMenu.Item variant="destructive">Delete</ContextMenu.Item>
					</ContextMenu.Group>
				</ContextMenu.SubContent>
			</ContextMenu.Sub>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.CheckboxItem bind:checked={showBookmarks}
				>Show Bookmarks</ContextMenu.CheckboxItem
			>
			<ContextMenu.CheckboxItem bind:checked={showFullURLs}>Show Full URLs</ContextMenu.CheckboxItem
			>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.RadioGroup bind:value>
				<ContextMenu.Label>People</ContextMenu.Label>
				<ContextMenu.RadioItem value="pedro">Pedro Duarte</ContextMenu.RadioItem>
				<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
			</ContextMenu.RadioGroup>
		</ContextMenu.Group>
	</ContextMenu.Content>
</ContextMenu.Root>

Installation

pnpm dlx shadcn-svelte@latest add context-menu

npx shadcn-svelte@latest add context-menu

npx shadcn-svelte@latest add context-menu

bun x shadcn-svelte@latest add context-menu

Install `bits-ui`:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

Copy and paste the following code into your project.

<script lang="ts">
  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
  import CheckIcon from '@lucide/svelte/icons/check';
  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
  import type { Snippet } from "svelte";

  let {
    ref = $bindable(null),
    checked = $bindable(false),
    indeterminate = $bindable(false),
    class: className,
    inset,
    children: childrenProp,
    closeOnSelect = false,
    ...restProps
  }: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
    inset?: boolean;
    children?: Snippet;
  } = $props();
</script>

<ContextMenuPrimitive.CheckboxItem
  bind:ref
  {closeOnSelect}
  bind:checked
  bind:indeterminate
  data-slot="context-menu-checkbox-item"
  data-inset={inset}
  class={cn(
    "focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
    className
  )}
  {...restProps}
>
  {#snippet children({ checked })}
    <span class="absolute right-2 pointer-events-none">
      {#if checked}
        <CheckIcon  />
      {/if}
    </span>
    {@render childrenProp?.()}
  {/snippet}
</ContextMenuPrimitive.CheckboxItem>

Usage

<script lang="ts">
  import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>

<ContextMenu.Root>
  <ContextMenu.Trigger>Right click here</ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item>Profile</ContextMenu.Item>
    <ContextMenu.Item>Billing</ContextMenu.Item>
    <ContextMenu.Item>Team</ContextMenu.Item>
    <ContextMenu.Item>Subscription</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>

Basic

A simple context menu with a few actions.

<script lang="ts">
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Group>
			<ContextMenu.Item>Back</ContextMenu.Item>
			<ContextMenu.Item disabled>Forward</ContextMenu.Item>
			<ContextMenu.Item>Reload</ContextMenu.Item>
		</ContextMenu.Group>
	</ContextMenu.Content>
</ContextMenu.Root>

Submenu

Use ContextMenu.Sub to nest secondary actions.

<script lang="ts">
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Group>
			<ContextMenu.Item>
				Copy
				<ContextMenu.Shortcut>⌘C</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Cut
				<ContextMenu.Shortcut>⌘X</ContextMenu.Shortcut>
			</ContextMenu.Item>
		</ContextMenu.Group>
		<ContextMenu.Sub>
			<ContextMenu.SubTrigger>More Tools</ContextMenu.SubTrigger>
			<ContextMenu.SubContent>
				<ContextMenu.Group>
					<ContextMenu.Item>Save Page...</ContextMenu.Item>
					<ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
					<ContextMenu.Item>Name Window...</ContextMenu.Item>
				</ContextMenu.Group>
				<ContextMenu.Separator />
				<ContextMenu.Group>
					<ContextMenu.Item>Developer Tools</ContextMenu.Item>
				</ContextMenu.Group>
				<ContextMenu.Separator />
				<ContextMenu.Group>
					<ContextMenu.Item variant="destructive">Delete</ContextMenu.Item>
				</ContextMenu.Group>
			</ContextMenu.SubContent>
		</ContextMenu.Sub>
	</ContextMenu.Content>
</ContextMenu.Root>

Shortcuts

Add ContextMenu.Shortcut to show keyboard hints.

<script lang="ts">
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Group>
			<ContextMenu.Item>
				Back
				<ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item disabled>
				Forward
				<ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Reload
				<ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
			</ContextMenu.Item>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.Item>
				Save
				<ContextMenu.Shortcut>⌘S</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Save As...
				<ContextMenu.Shortcut>⇧⌘S</ContextMenu.Shortcut>
			</ContextMenu.Item>
		</ContextMenu.Group>
	</ContextMenu.Content>
</ContextMenu.Root>

Groups

Group related actions and separate them with dividers.

<script lang="ts">
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Group>
			<ContextMenu.Label>File</ContextMenu.Label>
			<ContextMenu.Item>
				New File
				<ContextMenu.Shortcut>⌘N</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Open File
				<ContextMenu.Shortcut>⌘O</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Save
				<ContextMenu.Shortcut>⌘S</ContextMenu.Shortcut>
			</ContextMenu.Item>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.Label>Edit</ContextMenu.Label>
			<ContextMenu.Item>
				Undo
				<ContextMenu.Shortcut>⌘Z</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Redo
				<ContextMenu.Shortcut>⇧⌘Z</ContextMenu.Shortcut>
			</ContextMenu.Item>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.Item>
				Cut
				<ContextMenu.Shortcut>⌘X</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Copy
				<ContextMenu.Shortcut>⌘C</ContextMenu.Shortcut>
			</ContextMenu.Item>
			<ContextMenu.Item>
				Paste
				<ContextMenu.Shortcut>⌘V</ContextMenu.Shortcut>
			</ContextMenu.Item>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.Item variant="destructive">
				Delete
				<ContextMenu.Shortcut>⌫</ContextMenu.Shortcut>
			</ContextMenu.Item>
		</ContextMenu.Group>
	</ContextMenu.Content>
</ContextMenu.Root>

Icons

Combine icons with labels for quick scanning.

<script lang="ts">
	import ClipboardPasteIcon from "@lucide/svelte/icons/clipboard-paste";
	import CopyIcon from "@lucide/svelte/icons/copy";
	import ScissorsIcon from "@lucide/svelte/icons/scissors";
	import TrashIcon from "@lucide/svelte/icons/trash";
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Group>
			<ContextMenu.Item>
				<CopyIcon />
				Copy
			</ContextMenu.Item>
			<ContextMenu.Item>
				<ScissorsIcon />
				Cut
			</ContextMenu.Item>
			<ContextMenu.Item>
				<ClipboardPasteIcon />
				Paste
			</ContextMenu.Item>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.Item variant="destructive">
				<TrashIcon />
				Delete
			</ContextMenu.Item>
		</ContextMenu.Group>
	</ContextMenu.Content>
</ContextMenu.Root>

Checkboxes

Use ContextMenu.CheckboxItem for toggles.

<script lang="ts">
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
 
	let showBookmarksBar = $state(true);
	let showFullURLs = $state(false);
	let showDeveloperTools = $state(true);
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Group>
			<ContextMenu.CheckboxItem bind:checked={showBookmarksBar}>
				Show Bookmarks Bar
			</ContextMenu.CheckboxItem>
			<ContextMenu.CheckboxItem bind:checked={showFullURLs}>Show Full URLs</ContextMenu.CheckboxItem
			>
			<ContextMenu.CheckboxItem bind:checked={showDeveloperTools}>
				Show Developer Tools
			</ContextMenu.CheckboxItem>
		</ContextMenu.Group>
	</ContextMenu.Content>
</ContextMenu.Root>

Radio

Use ContextMenu.RadioItem for exclusive choices.

<script lang="ts">
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
 
	let user = $state("pedro");
	let theme = $state("light");
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Group>
			<ContextMenu.Label>People</ContextMenu.Label>
			<ContextMenu.RadioGroup bind:value={user}>
				<ContextMenu.RadioItem value="pedro">Pedro Duarte</ContextMenu.RadioItem>
				<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
			</ContextMenu.RadioGroup>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.Label>Theme</ContextMenu.Label>
			<ContextMenu.RadioGroup bind:value={theme}>
				<ContextMenu.RadioItem value="light">Light</ContextMenu.RadioItem>
				<ContextMenu.RadioItem value="dark">Dark</ContextMenu.RadioItem>
				<ContextMenu.RadioItem value="system">System</ContextMenu.RadioItem>
			</ContextMenu.RadioGroup>
		</ContextMenu.Group>
	</ContextMenu.Content>
</ContextMenu.Root>

Destructive

Use variant="destructive" to style the menu item as destructive.

<script lang="ts">
	import PencilIcon from "@lucide/svelte/icons/pencil";
	import ShareIcon from "@lucide/svelte/icons/share";
	import TrashIcon from "@lucide/svelte/icons/trash";
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger
		class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
	>
		<span class="hidden pointer-fine:inline-block">Right click here</span>
		<span class="hidden pointer-coarse:inline-block">Long press here</span>
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Group>
			<ContextMenu.Item>
				<PencilIcon />
				Edit
			</ContextMenu.Item>
			<ContextMenu.Item>
				<ShareIcon />
				Share
			</ContextMenu.Item>
		</ContextMenu.Group>
		<ContextMenu.Separator />
		<ContextMenu.Group>
			<ContextMenu.Item variant="destructive">
				<TrashIcon />
				Delete
			</ContextMenu.Item>
		</ContextMenu.Group>
	</ContextMenu.Content>
</ContextMenu.Root>

Sides

Control submenu placement with side and align props.

<script lang="ts">
	import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
 
	const sides = ["top", "right", "bottom", "left"] as const;
</script>
 
<div class="grid w-full max-w-sm grid-cols-2 gap-4">
	{#each sides as side (side)}
		<ContextMenu.Root>
			<ContextMenu.Trigger
				class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
			>
				<span class="hidden pointer-fine:inline-block">Right click ({side})</span>
				<span class="hidden pointer-coarse:inline-block">Long press ({side})</span>
			</ContextMenu.Trigger>
			<ContextMenu.Content {side}>
				<ContextMenu.Group>
					<ContextMenu.Item>Back</ContextMenu.Item>
					<ContextMenu.Item>Forward</ContextMenu.Item>
					<ContextMenu.Item>Reload</ContextMenu.Item>
				</ContextMenu.Group>
			</ContextMenu.Content>
		</ContextMenu.Root>
	{/each}
</div>

Command Data Table

Epicenter

Context Menu

Epicenter

Install bits-ui:

Copy and paste the following code into your project.

Install `bits-ui`: