Skip to main content

Context Menu

A right-click menu with items, shortcuts and keyboard navigation.

1'use client';
2

3import {
4  CopyIcon,
5  Delete02Icon,
6  Download01Icon,
7  PencilEdit01Icon,
8  Share01Icon,
9} from '@hugeicons/core-free-icons';
10import { HugeiconsIcon } from '@hugeicons/react';
11import { ContextMenu } from '@/components/ui/context-menu';
12

13export function Default() {
14  return (
15    <ContextMenu className="w-full max-w-md">
16      <ContextMenu.Trigger className="border-border bg-hatch text-muted-foreground flex h-48 w-full items-center justify-center rounded-xl border text-sm">
17        Right click here
18      </ContextMenu.Trigger>
19      <ContextMenu.Content>
20        <ContextMenu.Label>report-q3.pdf</ContextMenu.Label>
21        <ContextMenu.Separator />
22        <ContextMenu.Item>
23          <HugeiconsIcon icon={PencilEdit01Icon} size={16} />
24          Rename
25          <ContextMenu.Shortcut>F2</ContextMenu.Shortcut>
26        </ContextMenu.Item>
27        <ContextMenu.Item>
28          <HugeiconsIcon icon={CopyIcon} size={16} />
29          Copy
30          <ContextMenu.Shortcut>Ctrl C</ContextMenu.Shortcut>
31        </ContextMenu.Item>
32        <ContextMenu.Item>
33          <HugeiconsIcon icon={Download01Icon} size={16} />
34          Download
35        </ContextMenu.Item>
36        <ContextMenu.Item disabled>
37          <HugeiconsIcon icon={Share01Icon} size={16} />
38          Share
39        </ContextMenu.Item>
40        <ContextMenu.Separator />
41        <ContextMenu.Item variant="destructive">
42          <HugeiconsIcon icon={Delete02Icon} size={16} />
43          Delete
44          <ContextMenu.Shortcut>Del</ContextMenu.Shortcut>
45        </ContextMenu.Item>
46      </ContextMenu.Content>
47    </ContextMenu>
48  );
49}

Installation

pnpm dlx nachui add context-menu

Anatomy

1import { ContextMenu } from '@/components/ui/context-menu';
1<ContextMenu>
2  <ContextMenu.Trigger>Right click here</ContextMenu.Trigger>
3  <ContextMenu.Content>
4    <ContextMenu.Label>Actions</ContextMenu.Label>
5    <ContextMenu.Separator />
6    <ContextMenu.Item>
7      Copy
8      <ContextMenu.Shortcut>Ctrl C</ContextMenu.Shortcut>
9    </ContextMenu.Item>
10    <ContextMenu.Item variant="destructive">Delete</ContextMenu.Item>
11  </ContextMenu.Content>
12</ContextMenu>
The menu opens at the pointer on right click, on long press on touch devices, and from the keyboard with Shift F10 or the context menu key. It clamps itself to the viewport, and arrow keys, Home, End and Escape work as in any menu.

Composition

Use the following composition to build a ContextMenu:
ContextMenu
├── ContextMenu.Trigger
└── ContextMenu.Content
    ├── ContextMenu.Label
    ├── ContextMenu.Item
    │   └── ContextMenu.Shortcut
    └── ContextMenu.Separator

API Reference

ContextMenu

PropTypeDefaultDescription
onOpenChange(open: boolean) => void-Callback when open state changes
classNamestring-Additional CSS classes

ContextMenu.Trigger

PropTypeDefaultDescription
disabledbooleanfalseIgnore right clicks and long press
classNamestring-Additional CSS classes

ContextMenu.Item

PropTypeDefaultDescription
disabledbooleanfalseDisable the item
variant'default' | 'destructive''default'Visual style
onSelect() => void-Callback when selected
classNamestring-Additional CSS classes

ContextMenu.Label

PropTypeDefaultDescription
childrenReactNode-Label text

ContextMenu.Shortcut

Right-aligned hint inside an item. Purely visual, it does not register the shortcut.

ContextMenu.Separator

Visual separator between menu items. No props.
Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue
PreviousCommand
NextDialog
Ctrl+I