elringus/react-menu

React component for building accessible menu, dropdown, submenu, context menu and more.

React-Menu

An accessible and keyboard-friendly React menu library.

Live examples and docs

Features

• React menu components for easy and fast web development.
• Unlimited levels of submenu.
• Supports dropdown or context menu.
• Supports radio and checkbox menu items.
• Flexible menu positioning.
• Comprehensive keyboard interactions.
• Unstyled components and easy customisation.
• Optimal level support (level 3) of React 18 concurrent rendering.
• Works in major browsers without polyfills.
• WAI-ARIA Authoring Practices compliant.

Install

with npm

npm install @szhsin/react-menu

or with Yarn

yarn add @szhsin/react-menu

Usage

import { Menu, MenuItem, MenuButton, SubMenu } from '@szhsin/react-menu';

export default function App() {
  return (
    <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
      <MenuItem>New File</MenuItem>
      <MenuItem>Save</MenuItem>
      <SubMenu label="Edit">
        <MenuItem>Cut</MenuItem>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
      </SubMenu>
      <MenuItem>Print...</MenuItem>
    </Menu>
  );
}

Edit on CodeSandbox

Visit more examples and docs

Migration from v2 to v3
Migration from v1 to v2

Please note that React-Menu v3 requires React 16.14.0 or higher. If you are not able to upgrade React, you could install v2/v1 which requires React 16.8.0.

License

MIT Licensed.