Thành phần

Context Menu

Context menu on Base UI ContextMenu: focusable area, opens at the pointer or from Shift+F10, ink-fill highlight, hairline separators.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Right-click here, or focus it and press Shift+F10

Install

bash

npx shadcn add @eloquent/context-menu

Usage

tsx

import {
  ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel,
  ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger,
} from "@/components/ui/context-menu";

<ContextMenu>
  <ContextMenuTrigger className="rule-hair flex h-36 items-center justify-center border-b border-ink">
    Right-click here
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuGroup>
      <ContextMenuLabel>Page</ContextMenuLabel>
      <ContextMenuItem>Back<ContextMenuShortcut>⌘[</ContextMenuShortcut></ContextMenuItem>
      <ContextMenuItem>Reload</ContextMenuItem>
    </ContextMenuGroup>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Remove from front page</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

The trigger is a focusable area (tabindex="0"), so keyboard users can open the menu too. Put ContextMenuLabel inside a ContextMenuGroup. The submenu parts are ContextMenuSub, ContextMenuSubTrigger and ContextMenuSubContent.

States

Radio items

Right-click to sort

Destructive and disabled

Right-click a story

State	Treatment
Area focused	2px ink outline, 2px offset
Open	Paper popup, 1px ink rule, no shadow
Highlighted	Ink fill, paper text; it is the menu's focus indicator, so the keyboard and the pointer both move it
Disabled	`halftone` text, `cursor-not-allowed`; `tint-1` when highlighted
Checked	Ink check icon (checkbox), filled ink dot (radio)
Destructive	Ink ✕ icon before the label; never red
Submenu open	`tint-1` band on its row

Keyboard

Key	Action
Tab	Reach the area; it shows the 2px ink outline
Shift+F10 / Menu key	Open the menu at the area
Right click / long press	Open the menu at the pointer
ArrowDown / ArrowUp	Move the highlight (the first ArrowDown highlights the first row); it wraps
Home / End	First or last row
A letter	Jump to the next row starting with it
Enter / Space	Activate the row; checkbox and radio rows keep the menu open
ArrowRight	Open a submenu
ArrowLeft	Close a submenu and return to its row
Esc	Close; focus returns to the trigger

Vietnamese

Nhấp chuột phải vào đây, hoặc đưa tiêu điểm vào và nhấn Shift+F10

Ink adaptation

Upstream shadcn's shadow, radius, colour tokens and animation are removed. Rows are Barlow at 44px high, labels are tracked capitals and separators are hairlines. The inventory suggests a tint-1 highlight; the ink fill is used so the keyboard position stays clear (the same reading as Select). Built on Base UI ContextMenu.