Free and open-source React context menu components built for modern applications and websites. Trigger these menus with a right-click, long-press, or the keyboard menu key, built using React Aria and styled with Tailwind CSS.
Installation
Context menus reuse the same Dropdown component as our dropdown menus — only the trigger changes. You can add it using our CLI or manually:
npx untitledui@latest add dropdown
Context menu examples
Below are examples and variations of this context menu component. Right-click (or long-press on touch) the highlighted area to open the menu.
FAQs
Please refer to our frequently asked questions page for more.
Set the trigger prop to "contextMenu" on Dropdown.Root. The first child becomes the target area that opens the menu on right-click (or long-press on touch devices), and the menu opens at the pointer position instead of anchored to a button.
The target must be a React Aria pressable element, so wrap your content in an AriaButton (or Pressable) from react-aria-components. React Aria attaches the right-click and long-press handlers to it and manages focus and keyboard access for you.
Yes. Because they are built on React Aria, users can open the menu with the context menu key (or Shift+F10) while the target is focused, navigate items with the arrow keys, select with Enter, and dismiss with Escape.
Yes. Wrap a Dropdown.Item and a nested Dropdown.Popover in a SubmenuTrigger from react-aria-components, exactly as you would in a regular dropdown. See the advanced example above for nested submenus.
Use selectionMode="multiple" (or "single") on a Dropdown.Section for checkable items, and pass the addon prop on a Dropdown.Item to show a keyboard shortcut such as ⌘C.