Skip to content

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

License

Notifications You must be signed in to change notification settings

szhsin/react-menu

Repository files navigation

React-Menu

An accessible and keyboard-friendly React menu library.

Live examples and docs

NPM NPM TypeScript Known Vulnerabilities

Features

  • Unstyled and lightweight (8kB) React menu components
  • Unlimited levels of submenu
  • Supports dropdown, hover, and context menu
  • Supports radio and checkbox menu items
  • Flexible menu positioning
  • Comprehensive keyboard interactions
  • Customisable styling
  • Level 3 support of 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.