Overlays & Tooltips

Context Menu

Right-click menu with items, checkboxes and submenus.

Import

tsx

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from "@cronus-ui/ui";

bash

npx cronus-ui add context-menu

Examples

On a surface

A right-click menu on a target region — with shortcuts, a checkbox, a submenu and a radio group.

Right-click here

tsx

function ContextMenuDemo() {
  const [bookmarked, setBookmarked] = useState(true);
  const [branch, setBranch] = useState("main");

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-36 w-full max-w-sm select-none items-center justify-center rounded-lg border border-dashed border-border text-sm text-fg-secondary">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuItem>
          <Scissors aria-hidden="true" />
          Cut
          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy aria-hidden="true" />
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <ClipboardPaste aria-hidden="true" />
          Paste
          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked={bookmarked} onCheckedChange={setBookmarked}>
          Bookmarked
        </ContextMenuCheckboxItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>
            <Users aria-hidden="true" />
            Share
          </ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>
              <UserPlus aria-hidden="true" />
              Invite people
            </ContextMenuItem>
            <ContextMenuItem>
              <Copy aria-hidden="true" />
              Copy link
            </ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuLabel>Branch</ContextMenuLabel>
        <ContextMenuRadioGroup value={branch} onValueChange={setBranch}>
          <ContextMenuRadioItem value="main">main</ContextMenuRadioItem>
          <ContextMenuRadioItem value="develop">develop</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ContextMenuDefault layout:inline style:context-menu {
  label "Right click"
  text "Back"
  text "Reload"
}

page "/audit/context-menu/default" type:custom {
  use ContextMenuDefault
}

API Reference

Generated from the component's exported types.

ContextMenuProps

Extends ComponentProps<typeof ContextMenuPrimitive.Root>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`children`	`ReactNode`	—	Contents of the component.
`modal`	`boolean`	—	When true, interaction outside the surface is blocked.
`dir`	`"ltr" \| "rtl"`	—	Reading direction. Inherits from the document when omitted.

ContextMenuTriggerProps

Extends ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ContextMenuGroupProps

Extends ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.

ContextMenuPortalProps

Extends ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Portal>

Prop	Type	Default	Description
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.

ContextMenuSubProps

Extends ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.

ContextMenuRadioGroupProps

Extends ComponentPropsWithoutRef< typeof ContextMenuPrimitive.RadioGroup >

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.

ContextMenuSubTriggerProps

Extends ComponentPropsWithoutRef< typeof ContextMenuPrimitive.SubTrigger >

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.

ContextMenuSubContentProps

Extends ComponentPropsWithoutRef< typeof ContextMenuPrimitive.SubContent >

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ContextMenuContentProps

Extends ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ContextMenuItemProps

Extends ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ContextMenuCheckboxItemProps

Extends ComponentPropsWithoutRef< typeof ContextMenuPrimitive.CheckboxItem >

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state. Pair with `onCheckedChange`.
`onCheckedChange`	`(checked: boolean) => void`	—	Called with the next checked value whenever the control toggles.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ContextMenuRadioItemProps

Extends ComponentPropsWithoutRef< typeof ContextMenuPrimitive.RadioItem >

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ContextMenuLabelProps

Extends ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ContextMenuSeparatorProps

Extends ComponentPropsWithoutRef< typeof ContextMenuPrimitive.Separator >

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.

ContextMenuShortcutProps

Extends HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.