Thanks to visit codestin.com
Credit goes to github.com

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, keyboard-friendly React menu library

Live examples and docs

NPM NPM bundlephobia Known Vulnerabilities

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.