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.

Installation

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.

Danger

Designate a menu item as dangerous.

With Icon

Enhance context menu item by adding icons.

Separator

Separate context menu items with a separator.

Context Sub Menu

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

Disabled

Disable specific menu items.

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

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