Photonix

ContextMenu

Displays a menu of actions at the cursor position when right-clicking an element.

Preview

Right click here

Usage
import { ContextMenu } from '@photonix/ultimate';

<ContextMenu
  items={[
    { label: 'Edit', value: 'edit' },
    { label: 'Delete', value: 'delete' }
  ]}
  onSelect={(val) => console.log('Selected:', val)}
>
  <div style={{ padding: '40px', background: '#f5f5f5' }}>
    Right click here
  </div>
</ContextMenu>

Component API

ContextMenu

Prop
Type
Default
Description
children
React.ReactNode
-
The element that triggers the context menu
items
DropdownListItem[]
-
List of menu items
onSelect
((value: string) => void)
-
Callback when an item is selected
size
"sm" | "md"
'md'
Size of the menu items
className
string
-
Additional class name for the menu

Variants

Basic Usage

Wrap any component (like a Card or Image) to enable the context menu.

Right Click Me (Basic)

Basic Usage
import { ContextMenu, Box, Text } from '@photonix/ultimate';

<ContextMenu
  items={[
    { label: 'View Details', value: 'view' },
    { label: 'Duplicate', value: 'duplicate' }
  ]}
  onSelect={(val) => alert(val)}
>
  <Box style={{ 
    width: '300px', 
    padding: '24px', 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center',
    border: '1px dashed var(--border-neutral-tertiary)',
    borderRadius: 'var(--radius-2xs)'
  }}>
    <Text>Right Click Me</Text>
  </Box>
</ContextMenu>

With Icons & Dividers

Use icons for better recognition and dividers to group related actions.

Right Click for Rich Menu

With Icons & Dividers
import { ContextMenu, Box, Text } from '@photonix/ultimate';
import { PenOutline as Edit, OpenWithOutline as Share, TrashOutline as Trash, CopyOutline as Copy } from '@photonix/icons';

<ContextMenu
  items={[
    { label: 'Edit', value: 'edit', icon: <Edit />, divider: true },
    { label: 'Copy Link', value: 'copy', icon: <Copy /> },
    { label: 'Share', value: 'share', icon: <Share />, divider: true },
    { label: 'Delete', value: 'delete', icon: <Trash /> }
  ]}
>
  <Box style={{ 
    width: '300px', 
    padding: '40px', 
    display: 'grid', 
    placeItems: 'center', 
    border: '1px dashed var(--border-neutral-tertiary)',
    borderRadius: 'var(--radius-2xs)'
  }}>
     <Text weight="medium">Right Click for Options</Text>
  </Box>
</ContextMenu>

Small Size (with all variants)

Use the size prop to render a smaller context menu. Supports all features like icons, dividers, and disabled states.

Right Click for Small Menu

Small Size (with all variants)
import { ContextMenu, Box, Text } from '@photonix/ultimate';
import { PenOutline as Edit, OpenWithOutline as Share, TrashOutline as Trash, CopyOutline as Copy } from '@photonix/icons';

<ContextMenu
  size="sm"
  items={[
    { label: 'Edit', value: 'edit', icon: <Edit size={20} />, divider: true },
    { label: 'Copy Link', value: 'copy', icon: <Copy size={20} /> },
    { label: 'Share', value: 'share', icon: <Share size={20} />, divider: true },
    { label: 'Delete', value: 'delete', icon: <Trash size={20} />, disabled: true }
  ]}
>
  <Box>Right Click for Small Menu</Box>
</ContextMenu>

On this page

Preview
Component API
Variants
Basic Usage
With Icons & Dividers
Small Size
Photonix UI - React Components, Templates & Figma Design System