Overlays

ContextMenuTrigger

Compose-only trigger region that opens a context-menu on right-click or touch long-press.

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

Overview

Compose-only trigger region that opens a context-menu on right-click or touch long-press.

Usage

svelte 
<script lang="ts">
  import ContextMenu from '@lostgradient/cinder/context-menu';
  import ContextMenuTrigger from '@lostgradient/cinder/context-menu-trigger';
  import DropdownItem from '@lostgradient/cinder/dropdown-item';
  import DropdownMenu from '@lostgradient/cinder/dropdown-menu';
</script>

<ContextMenu>
  <ContextMenuTrigger>
    <p>Right-click this region</p>
  </ContextMenuTrigger>

  <DropdownMenu>
    <DropdownItem onclick={() => {}}>Copy</DropdownItem>
  </DropdownMenu>
</ContextMenu>

Guidance

Use When

  • Wrapping the region that should own contextual actions inside ContextMenu.
  • Pairing pointer-positioned menu behavior with dropdown menu items.

Avoid When

  • Used outside context-menu — it requires the ContextMenu provider.
  • Opening a normal click menu from a visible button — use dropdown-trigger.
02

When to use

Use when
  • Wrapping the region that should own contextual actions inside ContextMenu.
  • Pairing pointer-positioned menu behavior with dropdown menu items.
Avoid when
  • Used outside context-menu — it requires the ContextMenu provider.
  • Opening a normal click menu from a visible button — use dropdown-trigger.
03

Props

Props for context-menu-trigger
NameTypeDefaultDescription
children required snippet
oncontextmenu MouseEventHandler<T> | undefined | null
onpointerdown PointerEventHandler<T>undefinednull
onpointerup PointerEventHandler<T>undefinednull
onpointercancel PointerEventHandler<T>undefinednull
onpointerleave PointerEventHandler<T>undefinednull
onpointermove PointerEventHandler<T>undefinednull
onkeydown KeyboardEventHandler<T>undefinednull
onclick MouseEventHandler<T> | undefined | null