Radial menu — prediction cone
Click inside the area below, then move your pointer in any direction to select.
Move your pointer after opening to select
Dropdown with velocity prediction
Right-click below. Submenus stay open while you move diagonally toward them — powered by cursor velocity prediction, directional gating, and speed-adaptive triangle padding.
Right-click to open the dropdown menu
- velocity
- 0.000 px/ms
- predicted Δ
- 0 px
- speed pad
- 0.0 px
- toward sub
- —
Quick start
import { createPredictionConeMenu } from 'prediction-cone'; const menu = createPredictionConeMenu({ items: [ { id: 'cut', label: '✂️ Cut' }, { id: 'copy', label: '📋 Copy' }, { id: 'paste', label: '📌 Paste' }, { id: 'settings', label: '⚙️ Settings' }, ], ringRadius: 120, itemSize: 60, coneHalfAngleDeg: 22.5, deadzone: 30, }); // Attach to the whole page — right-click anywhere menu.attach(document, { trigger: 'contextmenu' }); menu.on('select', ({ item }) => { console.log('Selected:', item?.label); });
import { createDropdownMenu } from 'prediction-cone'; const dropdown = createDropdownMenu({ items: [ { id: 'file', label: 'File', icon: '📁', children: [ { id: 'new', label: 'New File', icon: '📄' }, { id: 'open', label: 'Open…', icon: '📂' }, { id: 'save', label: 'Save', icon: '💾' }, ], }, { id: 'edit', label: 'Edit', icon: '✏️', children: [ { id: 'undo', label: 'Undo', icon: '↩️' }, { id: 'redo', label: 'Redo', icon: '↪️' }, { id: 'sep', separator: true }, { id: 'copy', label: 'Copy', icon: '📋' }, { id: 'paste', label: 'Paste', icon: '📄' }, ], }, { id: 'help', label: 'Help', icon: '❓' }, ], submenuDelay: 150, // grace period for diagonal movement }); // Right-click any element to open dropdown.attach(document.getElementById('app')!, { trigger: 'contextmenu' }); dropdown.on('select', ({ item, parentItem }) => { console.log('Selected:', item?.label, 'in', parentItem?.label); });
API
Attach to a DOM element. Opens on the configured trigger event (click, contextmenu, pointerdown).
Remove all event listeners previously added by .attach().
Open the menu programmatically at given viewport coordinates.
Dismiss the menu without firing a select event.
Replace the item list at runtime without re-creating the menu.
Subscribe to open, close, change, or select events. Returns unsubscribe function.
Full cleanup — removes DOM, listeners and debug canvas.
Dropdown Menu
Create a list-based dropdown with velocity-predictive safe triangle submenu navigation.
Add nested ConeItem[] to show a submenu. Triangle zone adapts to cursor speed automatically.
Set separator: true to render a horizontal divider row.
Visual modifiers — danger renders the item in red, disabled disables interaction.
CSS variables
Set any of these on an ancestor element to theme the menu.