Context Menu · paneui

Right-click (or long-press) the trip folder

Installation

pnpm dlx shadcn@latest add @paneui/context-menu

Usage

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

<ContextMenu>
  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Rename</ContextMenuItem>
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Composition

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

Examples

Basic

Checkboxes

Use checkbox items for toggles; the menu stays open so several can change.

Radio Group

Use a radio group when the reader picks one option, like a sort order.

Inset

Motion

The menu grows out of the exact point that was clicked. With reduced motion it fades without scaling.

Keyboard

Opens on right-click or long-press. Arrow keys move between items, Enter selects, Arrow Right opens a submenu and Esc closes.

The items are shared with Menu, so both menus always look the same.

API Reference

Built on the Context Menu primitive. Only the props this library adds or changes are listed; everything else passes through.

ContextMenu

Also accepts every prop of ContextMenu.Root.

ContextMenuTrigger

The area that opens the menu. Unstyled apart from disabling text selection and the iOS callout. Also accepts every prop of ContextMenu.Trigger.

ContextMenuContent

The popup, already wrapped in a portal and positioner. Also accepts every prop of ContextMenu.Popup.

side: "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end"; Side of the pointer it opens on.
sideOffset= 4: number; Gap to the pointer in px.
align= "start": "start" | "center" | "end"; Alignment against the pointer.
alignOffset= 4: number; Shift along the alignment axis in px.

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"	—	Side of the pointer it opens on.
sideOffset	number	4	Gap to the pointer in px.
align	"start" \| "center" \| "end"	"start"	Alignment against the pointer.
alignOffset	number	4	Shift along the alignment axis in px.

ContextMenuItem

Also accepts every prop of ContextMenu.Item.

variant= "default": "default" | "destructive"; destructive tints the text, icon and highlight.
inset= false: boolean; Indent to line up with checkbox and radio items.

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	`destructive` tints the text, icon and highlight.
inset	boolean	false	Indent to line up with checkbox and radio items.

data-highlighted: Present on the item under the pointer or keyboard focus.

Data attribute	Description
data-highlighted	Present on the item under the pointer or keyboard focus.

ContextMenuCheckboxItem

Item with a check mark on the left. Also accepts every prop of ContextMenu.CheckboxItem.

ContextMenuRadioGroup

Also accepts every prop of ContextMenu.RadioGroup.

ContextMenuRadioItem

Item with a primary dot on the left when selected. Also accepts every prop of ContextMenu.RadioItem.

ContextMenuGroup

Also accepts every prop of ContextMenu.Group.

ContextMenuLabel

Small muted heading for a group. Place it inside a ContextMenuGroup. Also accepts every prop of ContextMenu.GroupLabel.

inset= false: boolean; Indent to line up with checkbox and radio items.

Prop	Type	Default	Description
inset	boolean	false	Indent to line up with checkbox and radio items.

ContextMenuSeparator

Also accepts every prop of ContextMenu.Separator.

ContextMenuShortcut

Right-aligned monospace hint, e.g. ⌘D. Visual only. Also accepts every prop of span.

ContextMenuSub

Also accepts every prop of ContextMenu.SubmenuRoot.

ContextMenuSubTrigger

Item with a trailing chevron that opens the submenu. Also accepts every prop of ContextMenu.SubmenuTrigger.

data-popup-open: Present while its submenu is open.

Data attribute	Description
data-popup-open	Present while its submenu is open.

ContextMenuSubContent

The submenu popup. Opens to the right by default; takes the same props as MenuContent. Also accepts every prop of Menu.Popup.