rm

@szhsin/react-menu

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

Showing:

Popularity

Downloads/wk

17.9K

GitHub Stars

501

Maintenance

Last Commit

1mo ago

Contributors

5

Package

Dependencies

2

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

React-Menu

An accessible and keyboard-friendly React menu library.

Live examples and docs

NPM TypeScript Known Vulnerabilities

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.
  • Customisable styling.
  • Comprehensive keyboard interactions.
  • Adheres to WAI-ARIA Authoring Practices.

Install

# with npm
npm install @szhsin/react-menu

# with Yarn
yarn add @szhsin/react-menu

Usage

import React from 'react';
import { Menu, MenuItem, MenuButton, SubMenu } from '@szhsin/react-menu';
import '@szhsin/react-menu/dist/index.css';

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

License

MIT Licensed.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Raimbek AlimbayevKazakhstan, Astana7 Ratings0 Reviews
2 months ago

Tutorials

No tutorials found
Add a tutorial