Context Menu

A menu opened by right-clicking or long-pressing an area.

Right-click here

When to use

Use when: Offering shortcuts for an item on right-click or long-press, such as rows or canvas objects.
Avoid when: It is the only way to reach an action; right-click isn't discoverable, so offer a visible menu too.

Installation

bunx shelf add context-menu

The source lands in src/components/ui/context-menu.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as ContextMenu from "@/components/ui/context-menu";

<ContextMenu.Root>
  <ContextMenu.Trigger>Right-click here</ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item>Copy</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: Dropdown Menu, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.