Next.js Context Menu for the App Router

Drivn installs through a small CLI that writes the component source straight into your repository — there is no runtime npm package to version-lock. Open a terminal at the root of your Next.js 16 project and run npx drivn add context-menu. The CLI prompts once for your install directory (defaulting to src/components/ui/), copies context-menu.tsx, and adds lucide-react to your package.json for the ChevronRight icon the submenu trigger renders. The CLI reference documents every flag, including targeting a custom path or installing several components at once. After install you own the file outright — future Drivn releases never overwrite it, and you can edit the internals without forking a dependency. Commit it first to keep a clean baseline before customizing.

An App Router page is a server component by default, so it cannot run the right-click handler or hold open state. Drivn's Context Menu is marked 'use client' because the root component tracks open and the cursor position with useState and registers DOM listeners in a useEffect. The clean pattern is to keep the menu in a small client component and render that island inside an otherwise server-rendered page. Import ContextMenu from @/components/ui/context-menu, wrap your target in ContextMenu.Trigger, then list the actions inside ContextMenu.Content. The installation guide covers project bootstrapping; the Context Menu examples show the full set of patterns.

The right-click positioning is the part most implementations get wrong, and Drivn handles it inside the root component. An onContextMenu handler calls e.preventDefault() to suppress the browser's native menu, stores e.clientX and e.clientY in a pos state object, and sets open to true. The Content component then reads that position and applies it as inline style={{ left: pos.x, top: pos.y }} on a fixed-positioned panel, so the menu appears exactly under the pointer. Dismissal is wired in a useEffect that, while open, listens for a mousedown anywhere to close and for the Escape key, removing both listeners on cleanup. The handler is verbatim from the component source below.

Nest a ContextMenu.Sub containing a ContextMenu.SubTrigger and ContextMenu.SubContent to build a flyout submenu — and it opens on hover with no extra JavaScript. The subContent styles use group-hover/sub:opacity-100 and group-hover/sub:visible against the parent's group/sub class, so CSS alone reveals the panel left-full top-0 beside its trigger. Pass a shortcut prop to any ContextMenu.Item to render a key hint pushed right with ml-auto text-xs text-muted-foreground, and add destructive to paint an item with text-destructive hover:bg-destructive/10 for delete actions. Use ContextMenu.Separator for a thin h-px bg-border divider and ContextMenu.Label for a muted group caption. See the Context Menu docs for every subcomponent and prop.