🎞️ Callback-Based Context Menu (Recommended)

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 ContextMenuItem
    •  
  • Disabled States: Items can be disabled based on conditions
    •  
  • Dividers: Visual organization with isDivider: 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 for precise menu positioning relative to cursor.
 
🎨 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
 
⏳ Async Callback Support (NEW)
 
Context menu callbacks now support async operations with automatic error handling
 
Async Operations Demo
 
🆕 New in v4.3.1 (2025-09-25): 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 Parameter: Context menu callback receives closeMenuCallback function
    •  
  • Conditional Closing: Call closeMenuCallback() to close menu after successful operations
    •  
  • Error Resilience: Skip closeMenuCallback() on errors to keep menu open for retry
    •  
  • Flexible UX: Control exactly when menu closes based on operation success/failure
 
Enhanced Error Handling
 
  • Try/Catch Wrapper: Automatic error catching for all async callbacks
    •  
  • Console Logging: Failed operations logged for debugging
    •  
  • Menu Persistence: Menu stays open on errors for retry actions
    •  
  • Custom Error Handling: Developers can implement custom error handling
 
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
 
Best Practices
 
  • Always handle potential errors in your async callbacks
    •  
  • Provide user feedback for long-running operations
    •  
  • Use try/catch blocks for custom error handling
    •  
  • Consider operation timeouts for network requests
 
🔍 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: Debug mode is DISABLED.
							Check the checkbox to enable debug mode.
 
  
  
 
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 (200px, 100px)
    •  
  • No Right-Click: Menu appears automatically without interaction
    •  
  • Style Testing: Perfect for CSS development and positioning
    •  
  • 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. Apply CSS changes in real-time
    5.  
  5. 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
 
Use Cases
 
  • Testing menu item states
    •  
  • Styling custom themes
    •  
  • Position optimization
    •  
  • Accessibility testing
 
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