@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

3.1.0 (2021-09-10)

Bug Fixes

• @react-md/dialog: DialogFooter align prop applies correct classes (644971d)
• @react-md/form: TooManyFilesError is only used if all the other validation has passed (6ed3f54)
• @react-md/form: ensure file names end with a period for useFileUpload extensions (9238140)
• @react-md/form: prevent infinite rerenders when calling useFileUpload's reset in useEffect (b2875b1)
• @react-md/utils: useDropzone fix around onDragLeave behavior (fdff9f2)
• typescript: updated all array types to be readonly (8f71bcb)

Features

• @react-md/form: add isValidFileName option to useFileUpload (dbd0375)
• @react-md/typography: override default typography without globals (ce89374), closes #1239

Documentation

• react-md.dev: updated sassdoc for new module system (4746d26)
• react-md.dev: updated SortableColumns example to import SortOrder type (b629e3e)

Other Internal Changes

• ran yarn format to include new files (48d3d7f)
• Simplifying format and covering json and yml files (#1227) (045ba5e)
• @react-md/dev-utils: fixed spelling of gzipped (baad174)
• examples: updated nextjs examples to latest version of next (b50d745)
• react-md.dev: added sassdoc hot-reloading (9d58e09)
• react-md.dev: updated sassdoc examples to be linkable (9ed096e)
• react-md.dev: Updated fonts for latest nextjs build optimizations (ca9ecbd)
• typescript: support typescript@v4.4.2 (5a9dd72)