Skip to content

Creating context menus with useMenu #5020

Description

@Vinnl

Provide a general summary of the feature here

I'm not sure if this can be done in an accessible way, but if so, it would be nice if a menu could be set to only trigger on right-click (or secondary click, I suppose, for left-handed users?). Ideally anchored to the click coordinates, but anchored to the triggering element would already be useful to.

🤔 Expected Behavior?

Like in useMenu, we could have a menu trigger, except that it wouldn't be a regular click or Enter to open it, but a right-click or ContextMenu press, i.e. when the contextmenu event triggers - replacing the default context menu. It would be up to the developer to ensure that the context menu is not the only place to provide certain functionality, for touchscreen users (though possibly long press could be supported too?).

😯 Current Behavior

Currently we only have useMenu and useMenuTrigger, which trigger on left-click.

💁 Possible Solution

  • A shouldTrigger property on AriaMenuTriggerProps for a callback that takes data like what kind of event activated the trigger, and returns a boolean whether the menu should be opened/closed or not.
  • A contextMenu: boolean property on AriaMenuTriggerProps that indicates whether the menu should only get triggered as a context menu.
  • A useContextMenuTrigger to replace useMenuTrigger.

🔦 Context

I'm trying to implement custom context menus.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions