ContextMenu

Right-click menu with items, separators, and groups. Triggered by right-clicking the designated area.

Example

Right-click here

Props

ContextMenu.Root

Prop	Type	Default	Description
`children`	`Snippet`	—	Trigger and content

ContextMenu.Trigger

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Area that responds to right-click

ContextMenu.Content

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Menu items

ContextMenu.Item

Prop	Type	Default	Description
`onSelect`	`() => void`	—	Callback when item is selected
`disabled`	`boolean`	—	Disables the item
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Item content

ContextMenu.Separator

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

ContextMenu.Group / ContextMenu.GroupHeading

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Group content / heading text

Usage

<script>
  import { ContextMenu } from '@chrissnell/chonky-ui';
</script>

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <div>Right-click this area</div>
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item onSelect={() => console.log('cut')}>Cut</ContextMenu.Item>
    <ContextMenu.Item onSelect={() => console.log('copy')}>Copy</ContextMenu.Item>
    <ContextMenu.Item onSelect={() => console.log('paste')}>Paste</ContextMenu.Item>
    <ContextMenu.Separator />
    <ContextMenu.Item disabled>Select All</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>