Context Menu for React

Item actions show up beside the pointer. Right-click opens them on a desktop, and a long press opens them on a phone.

Use it when those commands belong to the item you clicked and there is no room for a trigger on every row. If the actions can live on one button, a Dropdown Menu is easier to find. In React, Base UI opens the menu at the pointer, so keep another way to reach the same actions.

Installation

Anatomy

ContextMenuArrow
└── ContextMenuArrowTip
ContextMenuTrigger
ContextMenuIndicator
ContextMenuQuickItem
└── ContextMenuGroup
    ├── ContextMenuSubContent
    │   └── ContextMenuPositioner
    └── ContextMenuGroupLabel
ContextMenuItemIndicator
ContextMenuItemText
ContextMenuSeparator
ContextMenuTrigger
└── ContextMenuSubTrigger

Usage

import {
  ContextMenu, ContextMenuCheckboxItem, ContextMenuContent,
  ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem,
  ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator,
  ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent,
  ContextMenuSubTrigger, ContextMenuTrigger,
} from "@/components/ui/context-menu";

const ContextMenuDemo = () => (
  <ContextMenu>
    <ContextMenuTrigger className="mx-auto mt-8 flex h-16 w-full max-w-xs items-center justify-center self-start rounded-xl border border-dashed px-4 text-sm">
      <span className="pointer-fine:inline-block hidden">Right click here</span>
      <span className="pointer-coarse:inline-block hidden">
        Long press here
      </span>
    </ContextMenuTrigger>
    <ContextMenuContent className="w-48 max-w-full">
      <ContextMenuGroup>
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent className="w-44">
            <ContextMenuGroup>
              <ContextMenuItem>Save Page...</ContextMenuItem>
              <ContextMenuItem>Create Shortcut...</ContextMenuItem>
              <ContextMenuItem>Name Window...</ContextMenuItem>
            </ContextMenuGroup>
            <ContextMenuSeparator />
            <ContextMenuGroup>
              <ContextMenuItem>Developer Tools</ContextMenuItem>
            </ContextMenuGroup>
            <ContextMenuSeparator />
            <ContextMenuGroup>
              <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
            </ContextMenuGroup>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuGroup>
      <ContextMenuSeparator />
      <ContextMenuGroup>
        <ContextMenuCheckboxItem checked>
          Show Bookmarks
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
      </ContextMenuGroup>
      <ContextMenuSeparator />
      <ContextMenuGroup>
        <ContextMenuRadioGroup value="pedro">
          <ContextMenuGroupLabel>People</ContextMenuGroupLabel>
          <ContextMenuRadioItem value="pedro">
            Pedro Duarte
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuGroup>
    </ContextMenuContent>
  </ContextMenu>
);

Accessibility

Demos

Basic

Back, Forward, and Reload, with Forward disabled because it does not apply yet. This is the smallest menu worth shipping: a trigger area, a few items, and no icons or nested lists. Start here, then add structure once the actions are settled. A disabled item stays visible so people can see the command exists.

Submenu

More Tools opens a second menu: save the page, create a shortcut, name the window, plus developer tools and a delete action set apart at the bottom. Nest a group when the top menu would get long, and keep it to one level so the pointer has less path to lose. The trigger shows that more actions exist before anyone commits to them.

Shortcuts

Each item ends with a key hint, such as the chord for Back or Save. The hint is only a label. It does not listen for the keys, so the shortcut has to be wired up on the page or it will look like a promise you did not keep. Forward stays disabled, hint and all, when the action does not apply.

Groups

File and Edit are labeled sections, and a separator splits those from clipboard commands and from Delete at the end. Group a long menu so people scan chunks instead of one flat list. The label names the section. The line is enough between groups that do not need a heading, and the dangerous action stays last.

Icons

Copy, Cut, Paste, and Delete each lead with an icon, and the icon is hidden from assistive tech because the word is already there. Icons help when the labels are familiar and the menu is scanned more than read. They are a poor idea when the action is obscure, since a picture will not explain it. Delete stays in its own group.

Checkboxes

Show Bookmarks Bar, Show Full URLs, and Show Developer Tools are checkbox items, each with its own checked state. Several can be on at once, which is what you want for view settings that combine. A plain item is the better row when the action runs once, such as Reload, and should leave the menu. Store the checked values if they need to survive the menu closing.

Radio

People and Theme are separate radio groups, so picking a person does not clear the theme. Inside a group only one item stays selected, which is the right model for a mode rather than a command. The labels sit above each group so the two lists do not blur together. Keep unrelated actions as plain items outside the group.

Destructive

Edit and Share are ordinary items. Delete is separated and marked destructive, with a trash icon, so the dangerous action is not just another row. Use that variant for something hard to undo, keep it last, and remember the color is not a confirmation. If the delete is truly costly, follow it with a dialog rather than running it from the menu.

Sides

Four triggers pin the menu to a different side: top, right, bottom, and left. The usual placement sits near the pointer, which fails when the trigger is already against an edge and the menu would open off the screen. Pin a side in that case. The items themselves stay the same, so this is only about where the panel lands.

Rtl

The trigger and the menus are in Arabic, with dir set to rtl on the menu and on each panel. Submenus, shortcuts, and the check marks follow the reading direction instead of staying glued to the left. Use this when the page is right to left, and set the direction on the nested content too, or a submenu can open back toward the wrong side.

FAQ

API Reference