Context Menu

Pops a menu right where you click or hold down long, perfect for a right-click or a solid long press. It's all about quick access and easy picks!

Basic

This component excels in desktop applications but has significant limitations. Its lack of accessibility and mobile compatibility are notable drawbacks. React Aria hasn't released an official version of this component yet, possibly due to these issues.

Unless it's absolutely necessary for your project, I'd advise against using it. For most scenarios requiring accessible, rich interfaces, consider alternatives like Menus or Popovers instead. These components typically offer better cross-platform support and accessibility features.

Preview

Code

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add context-menu

Item Details

You can add details to menu items by using the ContextMenuItemDetails component.

Preview

Code

Danger

Designate a menu item as dangerous.

Preview

Code

With Icon

Enhance context menu item by adding icons.

Preview

Code

Separator

Separate context menu items with a separator.

Preview

Code

Sorry, this component doesn't exist yet. It's on our roadmap.

Disabled

Disable specific menu items.

Preview

Code

Also, you can disable items directly in MenuContent by using the disabledKeys prop.

<ContextMenu.Content disabledKeys={['gsu']} />

Command Calendar