Mielui · Context Menu

Installation

pnpm dlx @mielui/svelte add context-menu

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Separators span the inner panel width, including submenus. Menu items retain their padding.

Bind open to observe or close the root menu, and use onOpenChange for interaction callbacks. Pointer and keyboard opening keep the same state.

Open the menu with a right-click, a touch long-press, or the Context Menu key or Shift+F10 on its focused trigger. Arrow keys, Home, End, and typing navigate items; submenus support directional keys. An item onclick handler can call event.preventDefault() to cancel selection and dismissal.

Import and compose with Root, Trigger, Content, and Item:

import * as ContextMenu from '$lib/mielui/components/context-menu';

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <div>Right-click me</div>
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item callback={handleAction}>Action</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>

Examples

File actions

Image actions

Task actions

Glass surface

Set surface="glass" on ContextMenu.Content for a translucent background with blur. Omit surface to inherit --mielui-surface from your theme, or set surface="solid" to override it. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

API reference

ContextMenu.Root

Provides context menu state.

Prop	Type	Default
`children`	`Snippet<[]> \| undefined`	`—`
`open` Bindable	`boolean \| undefined`	`false`
`onOpenChange`	`((open: boolean) => void) \| undefined`	`—`

ContextMenu.CheckboxItem

Renders a checkable menu item.

Prop	Type	Default
`callback`	`(() => void) \| undefined`	`—`
`value` Required	`string \| string \| (string & string[])`	`—`
`inset`	`boolean \| undefined`	`false`
`checked` Bindable	`boolean \| undefined`	`false`
`disabled`	`boolean \| undefined`	`false`
`variant`	`ButtonVariant \| undefined`	`—`
`size`	`"sm" \| "md" \| "lg" \| "icon" \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`element` Bindable	`HTMLButtonElement \| HTMLAnchorElement \| undefined` Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:	`—`
`unstyled`	`boolean \| undefined` Skip the variant/size base classes and render with `class` alone.	`—`
`status`	`ButtonStatus \| undefined` Controlled visual state. Loading remains focusable and refuses activation.	`—`
`loading`	`boolean \| undefined` Convenience alias for `status="loading"`.	`—`
`loadingLabel`	`string \| undefined`	`—`
`successLabel`	`string \| undefined`	`—`
`errorLabel`	`string \| undefined`	`—`
`onclick`	`((event: MouseEvent) => void) \| undefined`	`—`
`onkeydown`	`((event: KeyboardEvent) => void) \| undefined`	`—`
`href`	`string \| undefined`	`—`

ContextMenu.Content

Renders the menu surface.

Prop	Type	Default
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`surface`	`"solid" \| "glass" \| undefined`	`—`

ContextMenu.Item

Renders a menu action.

Prop	Type	Default
`callback`	`(() => void) \| undefined`	`—`
`inset`	`boolean \| undefined`	`false`
`disabled`	`boolean \| undefined`	`false`
`variant`	`ButtonVariant \| undefined`	`—`
`size`	`"sm" \| "md" \| "lg" \| "icon" \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`element` Bindable	`HTMLButtonElement \| HTMLAnchorElement \| undefined` Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:	`—`
`unstyled`	`boolean \| undefined` Skip the variant/size base classes and render with `class` alone.	`—`
`status`	`ButtonStatus \| undefined` Controlled visual state. Loading remains focusable and refuses activation.	`—`
`loading`	`boolean \| undefined` Convenience alias for `status="loading"`.	`—`
`loadingLabel`	`string \| undefined`	`—`
`successLabel`	`string \| undefined`	`—`
`errorLabel`	`string \| undefined`	`—`
`onclick`	`((event: MouseEvent) => void) \| undefined`	`—`
`onkeydown`	`((event: KeyboardEvent) => void) \| undefined`	`—`
`href`	`string \| undefined`	`—`

ContextMenu.Separator

Separates menu items.

Prop	Type	Default
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

ContextMenu.Sub

Provides submenu state.

Prop	Type	Default
`children`	`Snippet<[]> \| undefined`	`—`

ContextMenu.SubContent

Renders a submenu surface.

Prop	Type	Default
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`surface`	`"solid" \| "glass" \| undefined`	`—`

ContextMenu.SubTrigger

Opens a submenu.

Prop	Type	Default
`inset`	`boolean \| undefined`	`false`
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

ContextMenu.Trigger

Defines the context menu target.