overlays
Context Menu Surface
Pointer and explicit keyboard intent open actions at the source without requiring a platform-specific menu shell.
- overlays
- context-menu
- actions
- pointer
Source actions opened by contextual intent; it is separate from full navigation menus.
Live preview
Quick usage
import { ContextMenuSurface } from "@pinky-ui/systems";
<ContextMenuSurface />Presets
Default
Restrained production behaviour.
Default behaviour
Quiet
Reduced intensity for dense product screens.
disabled={true}
Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add context-menu-surfacePrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Styles the bounded context-menu example. |
Accessibility
- Keyboard and touch paths match the pointer interaction.
- Stable labels and values remain available without motion.
Performance
- Actions mount on demand and coordinates stay inside the local boundary.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Object-specific actions in canvas or collection workspaces
When not to use
- Primary navigation or actions that must always be visible
Skill
Purpose
Use a context menu surface when actions belong to a specific object and should appear from an explicit contextual gesture rather than occupy permanent space.
Interaction anatomy
- The source supports an ordinary open action and a secondary context-menu gesture.
- Actions are positioned inside the source boundary.
- Escape and outside press close the action region.
Good for
Canvas objects, collection items and document-specific actions.
Avoid
Primary navigation, hidden essential controls or large menus with independent navigation.
Live example
Open actions or right-click the bounded document surface.
Usage
<ContextMenuSurface />Tune
Keep the action count small, clamp the pointer position, provide a visible trigger, and avoid destructive actions without a clear label.
Accessibility and reduced motion
The explicit trigger is the keyboard and touch fallback; do not make right-click the only path. Keep action labels visible and use Escape to dismiss. Reduced motion keeps the action region in place.