Anatomy of the GodUI Context Menu
A menu that grows out of the exact point you clicked. It uses the same keyframe as every GodUI popover, anchored to the pointer instead of a button.
↓Scroll to step through it
From the pointer
A context menu has no trigger button to grow out of. Radix anchors it to the
point where you right-clicked, and publishes the corner nearest that point as
--radix-context-menu-content-transform-origin.
The menu uses the same godui-popover-in keyframe as Popover and Dropdown
Menu, so with that origin it grows out from under your cursor. If there's no
room below, Radix flips the menu up; data-side changes, and so do the drift
direction and the origin.
Checks pop
Checkbox and radio items show their indicator only while checked. As in Dropdown Menu, the check pops in from 50% when you pick it and stays still when the menu opens on an item that's already checked.
The result
Right click the dashed area, or long-press on touch. Open "More Tools" to see a sub-menu grow from its item.
- opacity
- 0 → 1
- scale
- 0.96 → 1
- translate
- 0 -4px → 0 0
<ContextMenuPrimitive.Contentdata-slot="context-menu-content"className={cn( "z-50 … origin-(--radix-context-menu-content-transform-origin) … data-[side=bottom]:[--godui-enter-y:-0.25rem] … data-[state=open]:animate-godui-popover-in data-[state=closed]:animate-godui-popover-out", className,)}/>Anatomy of the GodUI Context Menu
A menu that grows out of the exact point you clicked. It uses the same keyframe as every GodUI popover, anchored to the pointer instead of a button.
- opacity
- 0 → 1
- scale
- 0.96 → 1
- translate
- 0 -4px → 0 0
<ContextMenuPrimitive.Contentdata-slot="context-menu-content"className={cn( "z-50 … origin-(--radix-context-menu-content-transform-origin) … data-[side=bottom]:[--godui-enter-y:-0.25rem] … data-[state=open]:animate-godui-popover-in data-[state=closed]:animate-godui-popover-out", className,)}/>From the pointer
A context menu has no trigger button to grow out of. Radix anchors it to the
point where you right-clicked, and publishes the corner nearest that point as
--radix-context-menu-content-transform-origin.
The menu uses the same godui-popover-in keyframe as Popover and Dropdown
Menu, so with that origin it grows out from under your cursor. If there's no
room below, Radix flips the menu up; data-side changes, and so do the drift
direction and the origin.
- scale
- 0.5 → 1
- opacity
- 0 → 1
<ContextMenuPrimitive.ItemIndicator className="[--godui-enter-scale:0.5] group-data-[animate=true]/context-menu-checkbox-item:data-[state=checked]:animate-godui-fade-scale-in"><CheckIcon className="size-4" /></ContextMenuPrimitive.ItemIndicator>Checks pop
Checkbox and radio items show their indicator only while checked. As in Dropdown Menu, the check pops in from 50% when you pick it and stays still when the menu opens on an item that's already checked.
The result
Right click the dashed area, or long-press on touch. Open "More Tools" to see a sub-menu grow from its item.
What's animated
| Interaction | Keyframe / mechanism | Properties | Easing | Duration |
|---|---|---|---|---|
| Open (menu, sub-menu) | godui-popover-in | opacity, scale 0.96 → 1 from the pointer, translate 4px → 0 | ease-spring-snappy | 260ms |
| Close | godui-popover-out | the same, reversed | ease-out-expo | 150ms |
| Check / radio appears | godui-fade-scale-in from 50% | opacity, scale | ease-spring-snappy | 260ms |
| Item highlight | snaps | none | none | none |
Why GPU-only
Menus and indicators animate opacity, scale and translate. Item
highlights snap instead of animating background paint.
Reduced motion
--godui-motion: 0 removes the scale and drift; the menu and indicators fade
for 150ms.
Replacing shadcn
npx shadcn add @godui/context-menu overwrites components/ui/context-menu.tsx.
Exports, props and data-slot attributes match shadcn/ui new-york-v4, so
existing imports keep working. It also installs godui-motion (easings,
keyframes, the FLIP hook) into your project.