Component

ContextMenu

A right-click triggered menu with full keyboard navigation. Supports sub-menus, separators, and portal rendering.

preview

React
"use client"

import ContextMenu from "@radui/ui/ContextMenu"

const ContextMenuExample = () => {
    return (
        <ContextMenu.Root>
            <ContextMenu.Trigger>
                <div className="flex items-center justify-center w-[280px] h-[100px] border-2 border-dashed rounded-lg text-gray-950 cursor-context-menu select-none">
                    Right-click here
                </div>
            </ContextMenu.Trigger>
            <ContextMenu.Portal>
                <ContextMenu.Content>
                    <ContextMenu.Item label="Copy">Copy</ContextMenu.Item>
                    <ContextMenu.Item label="Paste">Paste</ContextMenu.Item>
                    <ContextMenu.Separator />
                    <ContextMenu.Item label="Delete">Delete</ContextMenu.Item>
                </ContextMenu.Content>
            </ContextMenu.Portal>
        </ContextMenu.Root>
    )
}

export default ContextMenuExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import ContextMenu from "@radui/ui/ContextMenu"

export default () => {
    return (
        <ContextMenu.Root>
            <ContextMenu.Trigger>Right click</ContextMenu.Trigger>
            <ContextMenu.Portal>
                <ContextMenu.Content>
                    <ContextMenu.Item>Copy</ContextMenu.Item>
                    <ContextMenu.Separator />
                    <ContextMenu.Sub>
                        <ContextMenu.SubTrigger>More</ContextMenu.SubTrigger>
                    </ContextMenu.Sub>
                </ContextMenu.Content>
            </ContextMenu.Portal>
        </ContextMenu.Root>
    )
}

Root

The root ContextMenu component.

Prop	Type	Default
open	boolean	--
onOpenChange	function	--

Item

A single context menu item.

Prop	Type	Default
disabled	boolean	false
onSelect	function	--
className	string	""

Keyboard Interactions

Shortcut	Description
`Enter`	Activates the focused menu item.
`Space`	Activates the focused menu item.
`ArrowDown`	Moves focus to the next enabled item.
`ArrowUp`	Moves focus to the previous enabled item.
`Escape`	Closes the context menu and returns focus to the trigger context.

ARIA References

Reference	What Rad UI follows
Menu pattern	Uses menu semantics for contextual action lists with roving focus and item activation.