components / 30

marked context menu

the hidden menu should still carry intent. focus, selection, nesting, and danger each leave a different hand-drawn trace.

shadcnnpx shadcn@latest add berkantay/cheez/marked-context-menu

live

actions appear where the hand is

waiting for a right click

x 248 / y 116

selected noteideas should feel handled.right click here
or press shift + f10

ink

character

controlled statecomfortableink canvas

<MarkedContextMenu tone="pink" character="rushed">
  <MarkedContextMenuTrigger>right click me</MarkedContextMenuTrigger>
  <MarkedContextMenuContent>
    <MarkedContextMenuItem shortcut="⌘D">duplicate</MarkedContextMenuItem>
    <MarkedContextMenuCheckboxItem checked={compact}>compact view</MarkedContextMenuCheckboxItem>
    <MarkedContextMenuSub>
      <MarkedContextMenuSubTrigger>appearance</MarkedContextMenuSubTrigger>
      <MarkedContextMenuContent side="right">…</MarkedContextMenuContent>
    </MarkedContextMenuSub>
    <MarkedContextMenuItem tone="danger">remove</MarkedContextMenuItem>
  </MarkedContextMenuContent>
</MarkedContextMenu>

grammar

one menu, four kinds of intent

the marks carry meaning

01 / actionunderline

focus follows the pointer or arrow keys.

02 / selectedcheck or circle

persistent choice survives after closing.

03 / nestedmoving arrow

direction previews another layer.

04 / dangerstrike through

destructive intent looks destructive.

reference

api

Base UI behavior, Cheez feedback

part	prop	type	default	purpose
Root	`tone`	`MarkedContextMenuTone`	`"orange"`	frame ink
Root	`character`	`CheezCharacter`	`"rushed"`	shared drawing pressure
Root	`frameMark`	`CheezType`	`"rounded-box"`	popup boundary
Root	`itemMark`	`CheezType`	`"short-underline"`	focused-item trace
Root	`selectedMark`	`CheezType`	`"check"`	checked choice mark
Trigger	`children`	`ReactNode`	`—`	right-click target
Content	`sideOffset`	`number`	`6`	distance from pointer
Item	`description`	`ReactNode`	`—`	secondary action copy
Item	`shortcut`	`ReactNode`	`—`	visible keyboard hint
Item	`tone`	`"default" \| "danger"`	`"default"`	destructive treatment
CheckboxItem	`checked`	`boolean`	`—`	controlled multiple choice
RadioGroup	`value`	`any`	`—`	controlled exclusive choice
Sub	`open`	`boolean`	`—`	controlled nested menu

behavior notes

right click opens at the pointer; shift + f10 or the Menu key opens from the keyboard
arrow keys move focus, Enter chooses, Right opens a submenu, and Escape closes
placement flips and shifts when the menu approaches a viewport edge
checked and radio state stay controlled by your application
disabled items are skipped by pointer and keyboard navigation
focus management, dismissal, and collision handling come from Base UI
no Framer Motion is shipped