Photonix

ContextMenu

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

Preview

Right-click this surface

Usage
"use client";

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

const items = [
    { value: 'rename', label: 'Rename' },
    { value: 'duplicate', label: 'Duplicate' },
    { value: 'archive', label: 'Archive' },
];

export default function ContextMenuBasicExample() {
    return (
        <ContextMenu items={items}>
            <Box bg="secondary" borderRadius="md" p="lg" textAlign="center">
                <Text variant="body-md">Right-click this surface</Text>
            </Box>
        </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
"use client";

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

export default function ContextMenuBasicUsageExample() {
    return (
        <VStack gap="md" align="start">
            <ContextMenu
                items={[
                    { label: 'View Details', value: 'View Details' },
                    { label: 'Duplicate', value: 'Duplicate' },
                    { label: 'Archive', value: 'Archive', disabled: true },
                ]}
            >
                <Box
                    style={{
                        width: '100%',
                        minWidth: '300px',
                        padding: '24px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        border: '1px dashed var(--border-neutral-tertiary)',
                        borderRadius: 'var(--radius-2xs)',
                    }}
                >
                    <Text>Right Click Me (Basic)</Text>
                </Box>
            </ContextMenu>
        </VStack>
    );
}

With Icons & Dividers

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

Right Click for Rich Menu

With Icons & Dividers
"use client";

import { Box, ContextMenu, Text, VStack } from '@photonix/ultimate';
import { CopyOutline, OpenWithOutline, PenOutline, TrashOutline } from '@photonix/icons';

export default function ContextMenuRichExample() {
    return (
        <VStack gap="md" align="start">
            <ContextMenu
                items={[
                    { label: 'Edit', value: 'Edit', icon: <PenOutline />, divider: true },
                    { label: 'Copy Link', value: 'Copy Link', icon: <CopyOutline /> },
                    { label: 'Share', value: 'Share', icon: <OpenWithOutline />, divider: true },
                    { label: 'Delete', value: 'Delete', icon: <TrashOutline /> },
                ]}
            >
                <Box
                    style={{
                        width: '100%',
                        minWidth: '300px',
                        padding: '40px',
                        display: 'grid',
                        placeItems: 'center',
                        background: 'linear-gradient(135deg, var(--surface-neutral-primary), var(--surface-neutral-secondary))',
                        border: '1px dashed var(--border-neutral-tertiary)',
                        borderRadius: 'var(--radius-2xs)',
                    }}
                >
                    <Text weight="medium">Right Click for Rich Menu</Text>
                </Box>
            </ContextMenu>
        </VStack>
    );
}

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)
"use client";

import { Box, ContextMenu, Text, VStack } from '@photonix/ultimate';
import { CopyOutline, OpenWithOutline, PenOutline, TrashOutline } from '@photonix/icons';

export default function ContextMenuSmallExample() {
    return (
        <VStack gap="md" align="start">
            <ContextMenu
                size="sm"
                items={[
                    { label: 'Edit', value: 'Edit', icon: <PenOutline size={20} />, divider: true },
                    { label: 'Copy Link', value: 'Copy Link', icon: <CopyOutline size={20} /> },
                    { label: 'Share', value: 'Share', icon: <OpenWithOutline size={20} />, divider: true },
                    { label: 'Delete', value: 'Delete', icon: <TrashOutline size={20} />, disabled: true },
                ]}
            >
                <Box
                    style={{
                        width: '100%',
                        minWidth: '300px',
                        padding: '40px',
                        display: 'grid',
                        placeItems: 'center',
                        background: 'linear-gradient(135deg, var(--surface-neutral-primary), var(--surface-neutral-secondary))',
                        border: '1px dashed var(--border-neutral-tertiary)',
                        borderRadius: 'var(--radius-2xs)',
                    }}
                >
                    <Text weight="medium">Right Click for Small Menu</Text>
                </Box>
            </ContextMenu>
        </VStack>
    );
}

On this page

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