React-Menu

React component for building accessible menu, dropdown, submenu, context me...

Headless componentsReactAccessibility
szhsin/react-menuszhsin.github.io/react-menu/@szhsin/react-menu

README

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, hover, and context menu.
- Supports radio and checkbox menu items.
- Flexible menu positioning.
- Comprehensive keyboard interactions.
- Unstyled components and easy customisation.
- Optimal level support (level 3) ofReact 18 concurrent rendering.
- Supports server-side rendering.
- WAI-ARIA Authoring Practices compliant.

Install


with npm

  1. ```bash
  2. npm install @szhsin/react-menu
  3. ```

or with Yarn

  1. ```bash
  2. yarn add @szhsin/react-menu
  3. ```

Usage


  1. ```jsx
  2. import { Menu, MenuItem, MenuButton, SubMenu } from '@szhsin/react-menu';

  4. export default function App() {
  5.   return (
  6.     <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
  7.       <MenuItem>New File</MenuItem>
  8.       <MenuItem>Save</MenuItem>
  9.       <SubMenu label="Edit">
  10.         <MenuItem>Cut</MenuItem>
  11.         <MenuItem>Copy</MenuItem>
  12.         <MenuItem>Paste</MenuItem>
  13.       </SubMenu>
  14.       <MenuItem>Print...</MenuItem>
  15.     </Menu>
  16.   );
  17. }
  18. ```

**[Edit on CodeSandbox](https://codesandbox.io/s/react-menu-starter-3ez3c)**

**[Visit more examples and docs](https://szhsin.github.io/react-menu/)**

**[FAQs](docs/FAQs.md)**

Still on older versions? Please checkout our migration guides.

License


MIT Licensed.