@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 React from "react";
import { render } from "react-dom";
import { DropdownMenu } from "@react-md/menu";

const App = () => (
  <DropdownMenu
    id="example-dropdown-menu"
    items={[
      { onClick: () => console.log("Clicked Item 1"), children: "Item 1" },
      { onClick: () => console.log("Clicked Item 2"), children: "Item 2" },
      { onClick: () => console.log("Clicked Item 3"), children: "Item 3" },
    ]}
  >
    Dropdown
  </DropdownMenu>
);

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

Changelog

2.1.0 (2020-07-12)

Bug Fixes

• AppBar text color now defaults to rmd-theme-var(text-primary-on-background) (2c3ea5e)
• Booleans in dist/scssVariables (f6d43a3)
• ListItem disabled states (7b37292)
• Scroll active element into view while focusing (a9a0902)
• Tree focused index after expanding all with asterisk (8547629)
• Tree keyboard movement for child items that are expanded (fadddc7)
• Tree scrolling elements into view (eef48dc)

Features

• Added new mixin for optional css-modules (28ba828)
• Exported the useAutoComplete hook (cac5cd1)
• Improved Dark Mode using Raising Elevation (547877c), closes #860
• Render non-searchable items in AutoComplete (e7a82ac)