codefast/ui

Command Palette

Search for a command to run...

Overlay

Context Menu

Right-click menu with items, checkboxes, radio groups, submenus, and shortcuts.

Sourcenpm

Install

pnpm add @codefast/ui

Import path

@codefast/ui/context-menu

Examples

Basic

A simple context menu with a few actions.

Checkboxes

Use ContextMenuCheckboxItem for toggles.

Destructive

Use variant='destructive' to style the menu item as destructive.

Groups

Group related actions and separate them with dividers.

Icons

Combine icons with labels for quick scanning.

Radio

Use ContextMenuRadioItem for exclusive choices.

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

Shortcuts

Add ContextMenuShortcut to show keyboard hints.

Sides

Control submenu placement with side and align props.

Submenu

Use ContextMenuSub to nest secondary actions.

Anatomy

How the parts compose. Copy this skeleton and fill in the slots.

import {
  ContextMenu, ContextMenuTrigger, ContextMenuContent,
  ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup,
} from "@codefast/ui/context-menu";

<ContextMenu>
  <ContextMenuTrigger>…</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>…</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API reference

Props for each part of the component. All native element props are also forwarded.

ContextMenuTrigger

The region that opens the menu on right-click (or long-press).

PropTypeDefaultDescription
childrenReactNode—The area users right-click. Style it however you like.

ContextMenuCheckboxItem / RadioGroup

PropTypeDefaultDescription
checked / onCheckedChangeboolean / (checked: boolean) => void—On a checkbox item: its toggled state.
value / onValueChangestring / (value: string) => void—On a radio group: the selected RadioItem value.

ContextMenuSub

PropTypeDefaultDescription
childrenReactNode—Pair ContextMenuSubTrigger with ContextMenuSubContent for a submenu.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

KeyFunction
Arrow+DownMoves to the next item (once open).
Arrow+RightOpens the focused submenu.
EnterActivates the focused item.
EscCloses the menu.
  • Opens with the context-menu key or long-press, not just right-click.
  • Checkbox and radio items expose aria-checked for assistive tech.
  • Always offer the same actions elsewhere — a context menu must not be the only path.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Use for contextual shortcuts on an element (canvas, row, file).
  • Mirror the most-used items in a visible toolbar or button menu.

Don’t

  • Don’t hide primary actions only behind right-click.
  • Don’t nest submenus more than one level deep.