@react-md/menu

@react-md/menu

Create accessible dropdown menus that auto-position themselves to stay within the viewport. The menus are entirely navigable with a keyboard along with some additional behavior:

• ArrowUp and ArrowDown to focus the previous/next MenuItem that also allows wrapping
• Home and End to focus the first/last Menuitem in the menu
• type the starting letters of a MenuItem to focus it

More information on the built-in accessibility can be found in the accessibility example on the documentation site.

Installation

npm install --save @react-md/menu

You will also need to install the following packages for their styles:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon \
  @react-md/list \
  @react-md/button \
  @react-md/states \
  @react-md/utils

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import { render } from "react-dom";
import { DropdownMenu, MenuItem } from "@react-md/menu";

const App = () => (
  <DropdownMenu id="example-dropdown-menu" buttonChildren="Dropdown">
    <MenuItem onClick={() => console.log("Clicked Item 1")}>Item 1</MenuItem>
    <MenuItem onClick={() => console.log("Clicked Item 2")}>Item 2</MenuItem>
    <MenuItem onClick={() => console.log("Clicked Item 3")}>Item 3</MenuItem>
  </DropdownMenu>
);

render(<App />, document.getElementById("root"));

Changelog

5.1.1 (2022-04-01)

Bug Fixes

• @react-md/sheet: Animate correctly in React 18 (ca27b19)
• @react-md/tree: Add missing aria-selected attribute (e578ea0), closes #1388

Other Internal Changes

• eslint: Try new precommit eslintrc file for type imports (fb69a2f)
• react-md.dev: Fix typo for RTL tooltip (ee9f34c)
• react-md.dev: re-enable ripples to match defaults (736e3b4)