CM01 Callback-Based Context Menu

Dynamic menus with disabled states using contextMenuCallback

Movie Streaming App
Try this: Right-click movies, genres, and directors to see different menus with disabled items
Action History
Right-click items to see actions here
Callback Code
Callback Implementation 
 
 
Callback Features
 
Callback-Based Approach
 
  • Dynamic Generation: Menu items created programmatically
    •  
  • Type Safety: Full TypeScript support with ContextMenuEntry
    •  
  • Disabled States: Items can be disabled based on conditions
    •  
  • Dividers: Visual separation with divider: true
 
Smart Disabling
 
  • Movies: "Watch Now" disabled if not streamable/rented
    •  
  • Recommendations: Disabled for low-rated movies
    •  
  • Downloads: Disabled for rented content
 
Position Control
 
Use contextMenuXOffset and contextMenuYOffset JS properties for precise menu positioning relative to cursor.
 
CM02 Snippet-Based Context Menu
 
Manual template with full control using snippet contextMenu
 
Custom Menu Design
 
Try this: Right-click movies to see custom-styled menu with conditional items
  
Action History
  
Right-click items to see actions here
 
Template Code
 
Snippet Template 
 
 
 
Snippet Benefits
 
Snippet Advantages
 
  • Full Control: Complete markup and styling control
    •  
  • Svelte Features: Use #if, #each, bindings, etc.
    •  
  • Custom Content: Add info sections, images, complex layouts
    •  
  • Reactive: Menu updates automatically with data changes
 
When to Use Snippets
 
  • Complex layouts: Multi-column menus, rich content
    •  
  • Custom styling: Unique visual design requirements
    •  
  • Interactive elements: Sliders, checkboxes, form inputs
    •  
  • Information display: Status indicators, previews
 
Best Practices
 
  • Always call closeMenu() after actions
    •  
  • Use semantic HTML for accessibility
    •  
  • Apply consistent CSS classes
    •  
  • Handle disabled states properly
 
CM03 Async Callback Support
 
Context menu callbacks support async operations with automatic error handling
 
Async Operations Demo
 
Async callback support with automatic error handling and operation tracking
  
Async Operation Log
  
Right-click items to see async operations here
 
Async Examples
 
Async Callback Examples 
 
 
 
Async Features
 
Async Callback Features
 
  • Promise Support: Callbacks can return Promise<void>
    •  
  • Automatic Error Handling: Failed operations caught and logged
    •  
  • Non-blocking: Menu clicks properly await async operations
    •  
  • Debug Logging: Errors logged to console automatically
 
Enhanced Menu Control
 
  • closeMenuCallback: Received as second parameter to context menu callback
    •  
  • Conditional Closing: Call after successful operations only
    •  
  • Error Resilience: Skip on errors to keep menu open for retry
 
Use Cases
 
  • API Calls: Network requests for data updates
    •  
  • File Operations: Upload, download, or file system operations
    •  
  • Database Operations: CRUD operations with loading states
    •  
  • Long-running Tasks: Background processing operations
 
CM04 Debug Context Menu Mode
 
Development tool for testing and styling context menus
 
Debug Configuration
 
Debug Mode: Enable debug mode to see persistent context menu
 
Debug Status: DISABLED. Check the checkbox to enable.
 
 
Position Controls
 
 
 
 
 
 
 
Current Settings:
 
  • X Offset: 8px
    •  
  • Y Offset: 0px
    •  
  • Debug: OFF
 
Debug Benefits
 
Debug Mode Features
 
  • Always Visible: Menu stays open at fixed position
    •  
  • No Right-Click: Menu appears automatically
    •  
  • Style Testing: Perfect for CSS development
    •  
  • Offset Adjustment: Real-time position testing
 
Development Workflow
 
  1. Enable debug mode to see persistent menu
    2.  
  2. Adjust X/Y offsets for optimal positioning
    3.  
  3. Test different menu configurations
    4.  
  4. Disable debug mode for normal operation
 
Offset Guidelines
 
  • X Offset: Horizontal distance from cursor (default: 8px)
    •  
  • Y Offset: Vertical distance from cursor (default: 0px)
    •  
  • Positive values: Move menu right/down
    •  
  • Negative values: Move menu left/up
 
Next Steps
 
Custom Styling
 
Customize appearance and themes
 Styling Guide
 
Drag Highlight
 
Visual feedback during drag operations
 View Highlights
 
Performance
 
Optimize for large datasets
 Performance Tips