React-Menu

An accessible, keyboard-friendly React menu library

Live examples and docs

Features

Lightweight, unstyled React menu components
Unlimited submenu nesting
Supports dropdown, hover, and context menus
Radio and checkbox menu items
Flexible positioning options
Full keyboard interaction support
Compatible with React 18+ concurrent rendering
Supports server-side rendering
Implements WAI-ARIA menu pattern

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

FAQs

Still on an old version? Please checkout our migration guides.

License

MIT Licensed.