Context Menu

A right-click menu of actions, sharing the dropdown menu's item set.

Right-click or press and hold

Installation

pnpm dlx @mielui/svelte add context-menu

Usage

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.

<script lang="ts">
    import * as ContextMenu from '@mielui/svelte/components/context-menu';

    let copied = $state(false);
</script>

<ContextMenu.Root>
    <ContextMenu.Trigger>Right-click here</ContextMenu.Trigger>
    <ContextMenu.Content>
        <ContextMenu.Item
            callback={() => {
                copied = true;
            }}
        >
            Copy
        </ContextMenu.Item>
    </ContextMenu.Content>
</ContextMenu.Root>

Examples

Live actions

Each action changes the file in place, and a submenu holds the less common ones.

Release notes.md 1 item Right-click or press and hold

File actions

Release notes.md

Open the file menu to rename it.

Image actions

Right-click or press and hold the illustration.

Task actions

Release checklist 1 item Right-click or press and hold

Glass surface

Set surface="glass" on Content and SubContent for a translucent panel with blur, or surface="solid" for an opaque one. Without surface, the panel follows the theme. Glass falls back to an opaque panel when backdrop filtering is unavailable or reduced transparency is on.

Right-click or press and hold

Checkbox items

CheckboxItem toggles an option in place. Give each one a value that is unique within the menu, bind checked to read or set the state, and use callback to react when the person toggles it. inset adds the leading space that lines a plain Item up with the checkbox rows.

Right-click the canvas. Grid on, rulers off.

Items and other parts

Item and CheckboxItem are built on Button, so loading with labels shows progress. variant="destructive" on Item colors the row for an action that removes something and tints the highlight while it is active. Rows always use the menu row style, so Button's other variants, size and unstyled do not apply. element binds the DOM node, and onkeydown runs before the menu handles the key. A row is always a button and does not take href. Navigate from callback.

Root, Trigger, Content, Separator, Sub, SubTrigger and SubContent render their children and accept class and style like any element.

API reference

ContextMenu.Root

Provides context menu state.

children

Snippet<[]>
Content rendered inside.
open Bindable

boolean
Whether it is open. Bind it to control the state from outside.

Default false
onOpenChange

((open: boolean) => void)
Called with the new state whenever it opens or closes.

ContextMenu.CheckboxItem

Renders a checkable menu item.

callback

(() => void)
Called when the item is chosen.
value Required

string | (string & string[])
Value reported for the item.
inset

boolean
Indents the item so it lines up with items that have an indicator.

Default false
checked Bindable

boolean
Whether the item is checked. Bindable.

Default false
children

Snippet<[]>
Content rendered inside.
onkeydown

((event: KeyboardEvent) => void)
Called on key down, before the button handles the key itself.
onclick

((event: MouseEvent) => void)
Called when the button is activated. Loading and disabled buttons do not call it.
status

ButtonStatus
Controlled visual state. Loading remains focusable and refuses activation.
disabled

boolean
Prevents activation. A disabled link loses its destination and is skipped by Tab.

Default false
element Bindable

HTMLButtonElement | HTMLAnchorElement
Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:
loading

boolean
Convenience alias for status="loading".
labels

ButtonLabels
Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

ContextMenu.Content

Renders the menu surface.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.
surface

"solid" | "glass"
Surface treatment. Omit it to inherit --mielui-surface from the theme.

ContextMenu.Item

Renders a menu action.

callback

(() => void)
Called when the item is chosen.
inset

boolean
Indents the item so it lines up with items that have an indicator.

Default false
variant

"destructive"
Marks an action that deletes or cannot be undone. Omit it for a regular item.
children

Snippet<[]>
Content rendered inside.
onkeydown

((event: KeyboardEvent) => void)
Called on key down, before the button handles the key itself.
onclick

((event: MouseEvent) => void)
Called when the button is activated. Loading and disabled buttons do not call it.
status

ButtonStatus
Controlled visual state. Loading remains focusable and refuses activation.
disabled

boolean
Prevents activation. A disabled link loses its destination and is skipped by Tab.

Default false
element Bindable

HTMLButtonElement | HTMLAnchorElement
Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:
loading

boolean
Convenience alias for status="loading".
labels

ButtonLabels
Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

ContextMenu.Separator

Separates menu items.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

ContextMenu.Sub

Provides submenu state.

children

Snippet<[]>
Content rendered inside.

ContextMenu.SubContent

Renders a submenu surface.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.
surface

"solid" | "glass"
Surface treatment. Omit it to inherit --mielui-surface from the theme.

ContextMenu.SubTrigger

Opens a submenu.

inset

boolean
Indents the item so it lines up with items that have an indicator.

Default false
class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

ContextMenu.Trigger

Defines the context menu target.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.