Overlays

ContextMenu

Right-click and long-press menu positioned at the user's pointer while reusing dropdown menu parts.

import { ContextMenu } from '@lostgradient/cinder/context-menu';
overlaymenu
01

Overview

Right-click and long-press menu positioned at the user's pointer while reusing dropdown menu parts.

Usage

svelte 
<script lang="ts">
  import { ContextMenu } from '@lostgradient/cinder/context-menu';
</script>

Guidance

Use When

  • Providing contextual actions for a canvas, list row, file, or selected item.
  • Opening a menu from a pointer location instead of a visible dropdown trigger.

Avoid When

  • The menu should open from a button — use dropdown.
  • Showing arbitrary rich content rather than menu actions — use popover.
Live preview
02

When to use

Use when
  • Providing contextual actions for a canvas, list row, file, or selected item.
  • Opening a menu from a pointer location instead of a visible dropdown trigger.
Avoid when
  • The menu should open from a button — use dropdown.
  • Showing arbitrary rich content rather than menu actions — use popover.
03

Examples

Basic context menu

A right-click menu positioned at the pointer using dropdown menu parts.

04

Props

Props for context-menu
Name Type Default Required Bindable Description
open boolean false bind Controls the open state of the context menu; bindable for controlled usage.
onOpenChange (open: boolean) => void
anchorPoint ContextMenuAnchorPointundefined Explicit pointer coordinates at which to anchor the menu, overriding the position captured from the right-click or long-press event.
disabled boolean false When true, disables context-menu activation on right-click and long-press within the trigger region. Default false.
longPressDelay number 500 Duration in milliseconds a touch pointer must be held before the menu opens on mobile. Default 500.
children snippet req