@radix-ui/react-menu

What is @radix-ui/react-menu?

@radix-ui/react-menu is a set of accessible, unstyled components for building menus in React applications. It provides a flexible and customizable way to create dropdown menus, context menus, and other types of menu interfaces.

What are @radix-ui/react-menu's main functionalities?

Basic Menu

This code demonstrates a basic menu with three items. When an item is selected, an alert is shown.

import { Menu, MenuTrigger, MenuContent, MenuItem } from '@radix-ui/react-menu';

function BasicMenu() {
  return (
    <Menu>
      <MenuTrigger>Open Menu</MenuTrigger>
      <MenuContent>
        <MenuItem onSelect={() => alert('Item 1 selected')}>Item 1</MenuItem>
        <MenuItem onSelect={() => alert('Item 2 selected')}>Item 2</MenuItem>
        <MenuItem onSelect={() => alert('Item 3 selected')}>Item 3</MenuItem>
      </MenuContent>
    </Menu>
  );
}

Submenu

This code demonstrates a menu with a submenu. The submenu contains two items, and selecting any item triggers an alert.

import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSub, MenuSubTrigger, MenuSubContent } from '@radix-ui/react-menu';

function Submenu() {
  return (
    <Menu>
      <MenuTrigger>Open Menu</MenuTrigger>
      <MenuContent>
        <MenuItem onSelect={() => alert('Item 1 selected')}>Item 1</MenuItem>
        <MenuSub>
          <MenuSubTrigger>Submenu</MenuSubTrigger>
          <MenuSubContent>
            <MenuItem onSelect={() => alert('Subitem 1 selected')}>Subitem 1</MenuItem>
            <MenuItem onSelect={() => alert('Subitem 2 selected')}>Subitem 2</MenuItem>
          </MenuSubContent>
        </MenuSub>
        <MenuItem onSelect={() => alert('Item 2 selected')}>Item 2</MenuItem>
      </MenuContent>
    </Menu>
  );
}

Context Menu

This code demonstrates a context menu that appears on right-click. The menu contains two items, and selecting any item triggers an alert.

import { Menu, MenuTrigger, MenuContent, MenuItem } from '@radix-ui/react-menu';

function ContextMenu() {
  return (
    <div onContextMenu={(e) => { e.preventDefault(); document.getElementById('context-menu-trigger').click(); }}>
      Right-click here
      <Menu>
        <MenuTrigger id='context-menu-trigger' style={{ display: 'none' }} />
        <MenuContent>
          <MenuItem onSelect={() => alert('Context Item 1 selected')}>Context Item 1</MenuItem>
          <MenuItem onSelect={() => alert('Context Item 2 selected')}>Context Item 2</MenuItem>
        </MenuContent>
      </Menu>
    </div>
  );
}

Other packages similar to @radix-ui/react-menu

react-menu

react-menu is a lightweight, accessible menu component for React. It provides similar functionality to @radix-ui/react-menu, including support for nested menus and context menus. However, it may not offer the same level of customization and flexibility as @radix-ui/react-menu.

react-aria

react-aria is a library of React hooks that provides accessible UI primitives, including menu components. It offers a high degree of flexibility and accessibility, similar to @radix-ui/react-menu, but requires more manual setup and styling.

react-bootstrap

react-bootstrap is a popular library that provides Bootstrap components for React, including dropdown menus. While it offers a more opinionated and styled approach compared to @radix-ui/react-menu, it is less flexible in terms of customization.

README

react-menu

Installation

$ yarn add @radix-ui/react-menu
# or
$ npm install @radix-ui/react-menu

Usage

This is an internal utility, not intended for public usage.