Context Menu

Right-click menu on bits-ui ContextMenu. Opens at the pointer with a zoom-fade from the anchored corner, navigable with arrow keys, dismisses on Esc or outside click.

API Reference Component Source

Usage

Right-click here

context-menu.svelte

<script lang="ts">
	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
</script>

<ContextMenuPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'context-menu' } as Record<string, unknown>}
/>

Inverted

Set variant="inverted" on the content for Bloom’s signature dark-on-light menu surface. Item rows, separators, and focus rings inherit the inverted contrast through CSS-var swaps.

Right-click for inverted menu

context-menu-inverted.svelte

<ContextMenu.Content variant="inverted" class="w-56">
  <ContextMenu.Item>Back</ContextMenu.Item>
  <ContextMenu.Item>Reload</ContextMenu.Item>
  <ContextMenu.Separator />
  <ContextMenu.Item>Developer tools</ContextMenu.Item>
</ContextMenu.Content>

With icon

Drop a Remix icon (the <Icon> primitive) as the first child of ContextMenu.Item; the item's flex layout handles spacing.

Right-click for icon menu

context-menu-with-icon.svelte

<ContextMenu.Item>
	<Icon name="scissors-line" /> <span>Cut</span>
</ContextMenu.Item>

With shortcut

ContextMenu.Shortcut right-aligns inside the row — pair with a leading icon for the canonical platform-menu shape.

Right-click for shortcut menu

context-menu-with-shortcut.svelte

<ContextMenu.Item>
	<Icon name="scissors-line" /> <span>Cut</span>
	<ContextMenu.Shortcut>⌘X</ContextMenu.Shortcut>
</ContextMenu.Item>

With checkbox

ContextMenu.CheckboxItem binds to a boolean and toggles in place.

Right-click for toggles

context-menu-with-checkbox.svelte

<ContextMenu.CheckboxItem bind:checked={notifications}>
	Notifications
</ContextMenu.CheckboxItem>

With radio

Wrap ContextMenu.RadioItem in a ContextMenu.RadioGroup with a bound value.

Right-click to pick a theme

context-menu-with-radio.svelte

<ContextMenu.RadioGroup bind:value={theme}>
	<ContextMenu.RadioItem value="light">Light</ContextMenu.RadioItem>
	<ContextMenu.RadioItem value="dark">Dark</ContextMenu.RadioItem>
</ContextMenu.RadioGroup>

ContextMenu.Sub nests another content surface that opens to the side.

Right-click for nested menu

context-menu-sub.svelte

<ContextMenu.Sub>
	<ContextMenu.SubTrigger>More tools</ContextMenu.SubTrigger>
	<ContextMenu.SubContent>
		<ContextMenu.Item>Save page as…</ContextMenu.Item>
	</ContextMenu.SubContent>
</ContextMenu.Sub>

ContextMenu.Root props

Inherits bits-ui ContextMenu.Root props via spread.

Type	Default	Description
`boolean (bindable)`	`false`	Controls visibility. Two-way bindable.
`(open: boolean) => void`	—	Fires when the menu opens or closes.
`'ltr' \| 'rtl'`	`'ltr'`	Reading direction — affects submenu side.

ContextMenu.Content props

Type	Default	Description
`'default' \| 'inverted'`	`'default'`	Surface treatment. Inverted swaps popover/accent CSS vars to render dark on light (and light on dark) — Bloom’s signature menu identity.
`ComponentProps<ContextMenu.Portal>`	—	Forwarded to the internal portal.
`string`	—	Merged onto the content surface via tailwind-merge.