Right-click & dropdown menus with cursor anchoring + viewport flip, nested submenus, checkbox/radio items, shortcuts and full keyboard navigation.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-contextmenu/latest/gs-contextmenu.min.css"> <script src="https://cdn.get-set.it/gs-contextmenu/latest/gs-contextmenu.min.js"></script>
import ContextMenu from '@get-set/gs-contextmenu'; export default function App() { return ( <ContextMenu> <div className="content">Your ContextMenu content</div> </ContextMenu> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| items | GSMenuEntry[] | none | The menu entries. |
| trigger | GSContextMenuTrigger | 'contextmenu' | How the menu opens. 'contextmenu' (right-click, default) | 'click' (left-click dropdown) | 'both' | 'manual' (API only). |
| preventDefault | boolean | true | Prevent the native browser context menu (contextmenu triggers). Default true. |
| placement | GSContextMenuPlacement | 'bottom-start' | Anchored placement in click/dropdown mode. Default 'bottom-start'. |
| offset | GSContextMenuOffset | none | Custom nudge from the resolved position. |
| gap | number | 4 | Distance (px) between the anchor and the menu in anchored mode. Default 4. |
| flip | boolean | true | Auto-flip to the opposite side on viewport collision. Default true. |
| shift | boolean | true | Shift the menu along the cross axis to stay on screen. Default true. |
| boundaryPadding | number | 8 | Viewport padding kept when flipping/shifting (px). Default 8. |
| submenuOpenDelay | number | 120 | Delay (ms) before a hovered submenu opens. Default 120. |
| submenuCloseDelay | number | 200 | Delay (ms) before a submenu closes on mouse-out. Default 200. |
| closeOnOutside | boolean | true | Close on outside pointerdown. Default true. |
| closeOnEsc | boolean | true | Close on Escape. Default true. |
| closeOnBlur | boolean | true | Close when the window loses focus. Default true. |
| closeOnScroll | boolean | false | Close when the page scrolls. Default false. |
| closeOnSelect | boolean | true | Close after selecting an item (unless the item sets keepOpen). Default true. |
| animation | GSContextMenuAnimation | false | 'scale' | Entrance animation name. `false` disables motion. Default 'scale'. |
| exitAnimation | GSContextMenuAnimation | false | none | Separate exit animation. Mirrors `animation` when omitted. |
| animationDuration | number | { enter?: number; exit?: number } | 160 | Animation duration in ms. Default 160. |
| animationEasing | string | 'cubic-bezier(.16,1,.3,1)' | CSS easing for the enter/exit animation. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor prefers-reduced-motion. 'auto' | true | false. Default 'auto'. |
| theme | GSContextMenuTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default 'auto'. |
| accentColor | string | none | Accent color (CSS var --gscm-accent) used for highlight / focus. |
| rtl | boolean | false | Right-to-left layout. Default false. |
| size | GSContextMenuSize | 'md' | Size preset. Default 'md'. |
| density | GSContextMenuDensity | 'comfortable' | Item density. Default 'comfortable'. |
| minWidth | number | string | 200 | Minimum menu width (number = px). Default 200. |
| maxWidth | number | string | none | Maximum menu width (number = px). |
| maxHeight | number | string | none | Maximum menu height; the list scrolls past this (number = px). |
| rounded | number | string | none | Corner radius (number = px). |
| elevation | number | 3 | Shadow elevation preset (0–5). Default 3. |
| backdrop | 'none' | 'dim' | 'blur' | 'none' | Subtle full-screen backdrop behind the menu. 'none' (default) | 'dim' | 'blur'. |
| className | string | none | Extra class name applied to the menu root. |
Opens at the pointer and flips near edges.
Static or dynamic child menus on hover/keyboard.
Stateful items with grouped radios.
Arrow navigation, type-ahead and shortcuts.