Context Menu

A right-click menu that opens right at the pointer. Right-click inside the Trigger and the menu grows out of the cursor; if there is no room on the right it flips to the left of the cursor, and if there is no room below it shifts up as a whole. It ships plain items, checkbox items, radio groups, group labels, separators and shortcut hints. Submenus slide in from the side after a short hover, and a "safe triangle" keeps them open while the pointer travels diagonally toward them. It is fully keyboard operable (arrow keys, Enter, Escape, typeahead) and opens with a 500ms long-press on touch devices. The whole set is composed from ContextMenu and its static members (ContextMenu.Item and friends), with no headless library underneath.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ContextMenu/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/context-menu.en.json

Usage

import { ContextMenu } from "@/components/ui/context-menu";

const [starred, setStarred] = React.useState(false);
const [view, setView] = React.useState("grid");

<ContextMenu onOpenChange={(open) => console.log(open)}>
  <ContextMenu.Trigger className="rounded-xl border p-4">
    2026 Q4 Budget.xlsx
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item onSelect={() => console.log("open")}>
      Open
      <ContextMenu.Shortcut>⌘O</ContextMenu.Shortcut>
    </ContextMenu.Item>
    <ContextMenu.Sub>
      <ContextMenu.SubTrigger>Move to</ContextMenu.SubTrigger>
      <ContextMenu.SubContent>
        <ContextMenu.Item>My Drive</ContextMenu.Item>
        <ContextMenu.Item>Team Shared</ContextMenu.Item>
      </ContextMenu.SubContent>
    </ContextMenu.Sub>
    <ContextMenu.Separator />
    <ContextMenu.CheckboxItem checked={starred} onCheckedChange={setStarred}>
      Add star
    </ContextMenu.CheckboxItem>
    <ContextMenu.Label inset>View as</ContextMenu.Label>
    <ContextMenu.RadioGroup value={view} onValueChange={setView}>
      <ContextMenu.RadioItem value="grid">Icons</ContextMenu.RadioItem>
      <ContextMenu.RadioItem value="list">List</ContextMenu.RadioItem>
    </ContextMenu.RadioGroup>
    <ContextMenu.Separator />
    <ContextMenu.Item variant="destructive">Move to Trash</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu>

Props

ContextMenu

ContextMenu.Trigger

Other HTML attributes (aria-label, tabIndex, and so on) pass through to the trigger area. tabIndex defaults to 0 so keyboard users can focus it and press Shift+F10.

ContextMenu.Content

ContextMenu.Item

ContextMenu.CheckboxItem

ContextMenu.RadioGroup / RadioItem

Others

How it works

• Positioning: the main menu is anchored to a 0×0 virtual rectangle at the pointer and placed to the lower right of the cursor by default (side right, align start, 2px offset). With no room on the right it flips to the left; with no room below it shifts up as a whole. transform-origin follows the cursor's position relative to the panel, so the menu still grows out of the cursor after flipping. Submenus are anchored to their SubTrigger and flip to the left when the right side is full. Panels are portalled to body with position: fixed and recomputed on window resize, on scroll of any container, and when the panel changes size.
• Right-clicking again inside the same Trigger while the menu is open moves it to the new position without replaying a full close and open.
• Touch: a press with pointerType touch opens the menu after 500ms; moving more than 10px or lifting the finger cancels it.
• Animation: enter/exit is a fade + scale(.95) + an 8px offset from the opposite side; duration drives the animation and is written to --wb-context-menu-duration, which every transition inside the panel reads, so you can override it globally. The highlight background slides between items with a shared layout animation.
• Submenus: they open after hovering for subDelay. When the pointer leaves the SubTrigger, the triangle formed by the exit point and the two near corners of the submenu becomes a safe zone; moving inside it does not close the submenu even when crossing other items.
• Typeahead: characters typed within 500ms build a prefix matched against textValue; Chinese labels match on their first character. Repeating the same character cycles through items sharing that initial. Keys pressed while an IME is composing are ignored.

Accessibility

• Content is role="menu" with aria-orientation="vertical"; items are menuitem, menuitemcheckbox or menuitemradio, and checkbox/radio items carry aria-checked
• On open, focus moves to the menu itself (no item is highlighted automatically); ↓ starts at the first item, ↑/↓ cycle through enabled items, Home/End jump to the ends, Enter/Space select
• Escape closes the menu and returns focus to the Trigger; Tab closes the menu and focus moves naturally from the Trigger to the next element
• SubTrigger has aria-haspopup="menu" and aria-expanded; → or Enter opens the submenu and focuses its first item, ← or Escape closes only the submenu and returns to the SubTrigger
• With the Trigger focused, Shift+F10 or the context-menu key opens the menu at the Trigger's centre
• Disabled items set aria-disabled and are skipped during navigation; Shortcut hints are hidden from assistive technology; separators are role="separator"
• When the user's system has reduce motion turned on, enter/exit keeps only the fade (same duration) with no scale or offset, and the highlight background snaps into place