Skip to content

Add Context Menu component for right-click triggered menus#107

Open
iamnbutler wants to merge 1 commit into
mainfrom
tasks/gh-iamnbutler-gpuikit-issue-79--d8b45d57
Open

Add Context Menu component for right-click triggered menus#107
iamnbutler wants to merge 1 commit into
mainfrom
tasks/gh-iamnbutler-gpuikit-issue-79--d8b45d57

Conversation

@iamnbutler
Copy link
Copy Markdown
Owner

Summary

  • Adds a new Context Menu component that displays a positioned menu of actions triggered by right-click on a target element
  • Implements menu items with labels, icons, keyboard shortcuts, and separators
  • Supports disabled and destructive item styles
  • Includes keyboard navigation (arrow keys, Enter, Escape)
  • Closes menu on click outside or Escape key

Features

  • Right-click trigger: Menu appears at cursor position when right-clicking the target element
  • Menu items: Support for labels, icons (via closure), keyboard shortcut hints
  • Separators: Visual dividers between menu sections
  • States: Disabled items (non-interactive) and destructive items (styled in red)
  • Keyboard navigation: Arrow keys to move focus, Enter to activate, Escape to close
  • Click outside: Closes menu when clicking outside

API Example

let context_menu_state = cx.new(|_cx| {
    ContextMenuState::new(
        context_menu("file-actions")
            .trigger(|_window, cx| {
                div().p_4().child("Right-click me").into_any_element()
            })
            .menu(|_window, _cx| {
                vec![
                    menu_item("copy", "Copy").kbd("Cmd+C").icon(|| Icons::copy()),
                    menu_item("paste", "Paste").kbd("Cmd+V"),
                    menu_separator(),
                    menu_item("delete", "Delete").destructive(),
                ]
            })
            .on_action(|id, _window, _cx| {
                println!("Action: {}", id);
            }),
    )
});

Test plan

  • Component compiles without errors
  • Showcase example builds and includes context menu demo
  • All existing tests pass

Closes #79

🤖 Generated with Claude Code

Adds a Context Menu component that displays a positioned menu of actions
when triggered by right-click on a target element.

Features:
- Right-click trigger on a target element
- Menu positioned at cursor location
- Menu items with labels, icons, and keyboard shortcuts
- Separators between menu sections
- Disabled and destructive item styles
- Keyboard navigation (arrow keys, Enter, Escape)
- Close on click outside or Escape

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Context Menu component

1 participant