Context Menu — cinder playground

Overview

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

Usage

<script lang="ts">
  import Button from '@lostgradient/cinder/button';
  import ContextMenu from '@lostgradient/cinder/context-menu';
</script>

<ContextMenu>
  <ContextMenu.Trigger>
    <Button variant="ghost">Right-click this region</Button>
  </ContextMenu.Trigger>

  <ContextMenu.Menu>
    <ContextMenu.Item onclick={() => {}}>Cut</ContextMenu.Item>
    <ContextMenu.Item onclick={() => {}}>Copy</ContextMenu.Item>
    <ContextMenu.Separator />
    <ContextMenu.Item variant="danger" onclick={() => {}}>Delete</ContextMenu.Item>
  </ContextMenu.Menu>
</ContextMenu>

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

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.

Examples

Basic context menu

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

Props

Props for context-menu
Name	Type	Default	Description
`open` bindable	`boolean`	`false`	Controls the open state of the context menu; bindable for controlled usage.
`onOpenChange`	`(open: boolean) => void`
`anchorPoint`	`{ x: number; y: number; }`		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` required	`snippet`