Context Menu

Displays a menu of actions triggered by a right click.

Right click here

<ContextMenu>
  <ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuContent className="w-48">
    <ContextMenuItem>
      Back
      <ContextMenuShortcut>⌘[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem disabled>
      Forward
      <ContextMenuShortcut>⌘]</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Save Page...</ContextMenuItem>
        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>Show Bookmarks</ContextMenuCheckboxItem>
    <ContextMenuRadioGroup value="pedro">
      <ContextMenuLabel>People</ContextMenuLabel>
      <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

Installation

pnpm dlx cubix@latest add context-menu

Usage

Import

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/cubix/context-menu"

Example

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Composition

Use the following composition to build a ContextMenu:

ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuItem
    │   └── ContextMenuItem
    ├── ContextMenuSeparator
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuCheckboxItem
    │   └── ContextMenuCheckboxItem
    ├── ContextMenuSeparator
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   └── ContextMenuRadioGroup
    │       ├── ContextMenuRadioItem
    │       └── ContextMenuRadioItem
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent
            └── ContextMenuGroup
                ├── ContextMenuItem
                └── ContextMenuItem

Examples

Basic

A simple context menu with a few actions.

Right click here

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuGroup>
      <ContextMenuItem>Back</ContextMenuItem>
      <ContextMenuItem disabled>Forward</ContextMenuItem>
      <ContextMenuItem>Reload</ContextMenuItem>
    </ContextMenuGroup>
  </ContextMenuContent>
</ContextMenu>

Submenu

Use ContextMenuSub to nest secondary actions.

Right click here

<ContextMenuSub>
  <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>Save Page...</ContextMenuItem>
    <ContextMenuItem>Create Shortcut...</ContextMenuItem>
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuSubContent>
</ContextMenuSub>

Shortcuts

Add ContextMenuShortcut to show keyboard hints.

Right click here

<ContextMenuItem>
  Back
  <ContextMenuShortcut>⌘[</ContextMenuShortcut>
</ContextMenuItem>

Groups

Group related actions and separate them with dividers.

Right click here

<ContextMenuGroup>
  <ContextMenuLabel>File</ContextMenuLabel>
  <ContextMenuItem>New File</ContextMenuItem>
</ContextMenuGroup>
<ContextMenuSeparator />
<ContextMenuGroup>
  <ContextMenuLabel>Edit</ContextMenuLabel>
  <ContextMenuItem>Undo</ContextMenuItem>
</ContextMenuGroup>

Icons

Combine icons with labels for quick scanning.

Right click here

<ContextMenuItem>
  <CopyIcon />
  Copy
</ContextMenuItem>

Checkboxes

Use ContextMenuCheckboxItem for toggles.

Right click here

<ContextMenuCheckboxItem defaultChecked>
  Show Bookmarks Bar
</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>

Radio

Use ContextMenuRadioItem for exclusive choices.

Right click here

const [user, setUser] = React.useState("pedro")

<ContextMenuRadioGroup value={user} onValueChange={setUser}>
  <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
  <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
</ContextMenuRadioGroup>

Destructive

Use variant="destructive" to style the menu item as destructive.

Right click here

<ContextMenuItem variant="destructive">
  <TrashIcon />
  Delete
</ContextMenuItem>

Sides

Control submenu placement with side and align props.

Right click (top)

Right click (right)

Right click (bottom)

Right click (left)

<ContextMenuContent side="top">
  <ContextMenuItem>Back</ContextMenuItem>
</ContextMenuContent>

API Reference

Note: See the Base UI documentation for more information.

ContextMenu

The container that wraps the trigger and content and manages open state.

Prop	Type	Default	Description
open	boolean	-	Controlled open state. Omit to use uncontrolled mode.
defaultOpen	boolean	false	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
children	React.ReactNode	-	The trigger, content, and nested menu parts.

ContextMenuTrigger

The area that opens the menu on right click or long press.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The surface that opens the menu on right click or long press.

ContextMenuContent

The menu panel rendered in a portal next to the pointer.

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"right"	Preferred side of the pointer to render the menu on.
align	"start" \| "center" \| "end"	"start"	Alignment along the opposite axis of `side`.
sideOffset	number	0	Distance in pixels between the pointer and the menu.
alignOffset	number	4	Offset in pixels along the alignment axis.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

ContextMenuItem

An action inside the menu. Selecting it closes the menu.

Prop	Type	Default	Description
inset	boolean	-	Indent the item to align with items that have a leading icon.
variant	"default" \| "destructive"	"default"	Visual treatment. Use destructive for irreversible actions.
disabled	boolean	-	Prevents selection and removes the item from keyboard flow.
onSelect	(event: Event) => void	-	Called when the item is chosen. The menu closes afterwards.

ContextMenuCheckboxItem

A checkable item. The menu stays open after toggling.

Prop	Type	Default	Description
checked	boolean	-	Controlled checked state.
defaultChecked	boolean	-	Initial checked state when uncontrolled.
onCheckedChange	(checked: boolean) => void	-	Called when the checked state changes. The menu stays open.
disabled	boolean	-	Prevents toggling the item.

ContextMenuRadioGroup

A set of mutually exclusive items. The menu stays open after a change.

Prop	Type	Default	Description
value	string	-	Controlled selected value.
defaultValue	string	-	Initial selected value when uncontrolled.
onValueChange	(value: string) => void	-	Called when a radio item is selected. The menu stays open.

ContextMenuRadioItem

One option inside a radio group. value is required.

Prop	Type	Default	Description
value	string	-	The unique value represented by this radio item.
disabled	boolean	-	Prevents selecting the item.