The example below will showcase a simple DropdownMenu with MenuItems and a MenuItemSeparator.

This demo will showcase some of the props available for the DropdownMenu component.

Since the DropdownMenu supports all the props for a Button, you can render a DropdownMenu as a floating action button if needed.

Custom context menus can be created using the useContextMenu hook with the Menu component. The useContextMenu will provide a onContextMenu event handler that should be passed to an element to control the context menu visibility.

Just like normal DropdownMenu and Menu components, the context menu is fully keyboard navigable and will return focus to the focusable element that triggered the context menu when it is closed since it is possible to open a context menu with the special menu key for Windows and Linux operating systems. Mac does not have a similar way to trigger context menus from the keyboard, but it's possible to enable custom accessibility options to create a context menu from the current pointer location.

DropdownMenus can be nested to create complex cascading menus by rendering a DropdownMenu as a child of another DropdownMenu. This will render the DropdownMenu as a MenuItem instead of a button and change up some available props/functionality. The DropdownMenu will now accept ListItem props instead of Button props and the some keyboard functionality will change:

• when the menu is rendered horizontally, pressing the ArrowDown key will open the submenu and focus the first item. Pressing the ArrowUp key will close the submenu and return focus to the MenuItem
• when the menu is rendered vertically, pressing the ArrowRight key will open the submenu and focus the first item. Pressing the ArrowLeft key will close the submenu and return focus to the MenuItem.
• pressing the Escape key will only close the top-most menu and return focus to the MenuItem

Clicking a MenuItem that does not open a submenu will close all visible menus unless event.stopPropagation() is called.

Starting with react-md@v5.0.0, menus can be conditionally rendered as a @react-md/sheet using a new renderAsSheet configuration. This is generally helpful for small devices like phones since there is a lack of screen space. This functionality can be enabled by either:

• updating the root Configuration component from the @react-md/layout package to have menuConfiguration: { renderAsSheet: "phone" } or { renderAsSheet: true }
• wrapping the DropdownMenu or Menu component in a MenuConfigurationProvider and setting renderAsSheet={true} or renderAsSheet="phone"
• setting renderAsSheet={true} or renderAsSheet="phone" directly on the DropdownMenu or Menu component

Setting renderAsSheet="phone" will only render menus as sheets when the AppSize is phone.

You can configure additional sheet behavior in those three places like:

• sheetHeader - Normally an AppBar or a DialogHeader that would appear above the list of MenuItem
• sheetFooter - Normally an AppBar or a DialogFooter that would appear below the list of MenuItem
• sheetPosition - The sheet's position within the viewport. This defaults to "below"
• sheetVerticalSize - The sheet's vertical size. This defaults to "touch"

The example below will allow you to configure the renderAsSheet behavior so you can play around with the default implementation. In addition, this example will add a custom header and footer to the sheet that can also close the sheet using the useMenuVisibility hook.

The @react-md/form package includes some additional MenuItem components to render form components within menus:

• MenuItemGroup - Render a <ul role="group" aria-label="Accessible Label"> when rendering a group of related menu items together. This is generally used with the MenuItemRadio component.
• MenuItemRadio - Render a <Radio> as a MenuItem.
• MenuItemCheckbox - Render a <Checkbox> as a MenuItem.
• MenuItemSwitch - Render a <Switch> as a MenuItem.
• MenuItemFileInput - Render a <FileInput> as a MenuItem.
• MenuItemTextField - Render a <TextField> as a MenuItem.

These components are just wrappers that implement custom keyboard focus and movement behavior to work within Menus.

Updated Behavior

• All of these components will gain focus within the menu with normal menu keydown focus behavior.
  • The MenuItemTextField will only move focus to another MenuItem when it does not have a value so that the arrow keys can be used to move the location within the text field.
• Clicking a MenuItemRadio, MenuItemCheckbox, or MenuItemSwitch will only change the checked state and close the menu. You can disable this behavior by calling event.stopPropagation() in a custom onClick handler.
• Clicking a MenuItemFileInput will not close the menu so that custom file upload behavior can happen (like the useFileUpload hook).
• Clicking a MenuItemTextField will not close the menu and instead gain focus.
  • Pressing Tab or Escape while the MenuItemTextField is focused will still close the menu. You can prevent this behavior by implementing a custom onKeyDown event handler and calling event.stopPropagation().

Starting with react-md@v5.0.0, menus can behave like native operating system menus by wrapping group of menus with a MenuBar. This will update each DropdownMenu with the following functionality:

• In mouse mode, clicking on a DropdownMenu will display the menu like normal. If the user hovers over another DropdownMenu within the MenuBar, the current menu will hide and the DropdownMenu that is being hovered will be visible instead. This behavior will continue until:
  • a root level DropdownMenu is clicked
  • a MenuItem is clicked
  • an element outside of the MenuBar has been clicked
• In keyboard mode, the focus can change between the DropdownMenus by using the ArrowLeft, ArrowRight, Home, and End keys. The user can also type the first letter of one of the DropdownMenu to move focus to that element. If the menu is visible, pressing the ArrowLeft or ArrowRight keys will: close the current menu, move focus to the previous or next DropdownMenu, and open that menu unless the current menu item has a submenu.
• In touch mode, there are no changes in behavior.

This functionality was a bit difficult to describe, so check out the demo below to get a better understanding of the mouse and keyboard changes.

You an see some more details around the menubar spec here.

This example shows you how you create a DropdownMenu that displays the MenuItem in a grid using the listClassName prop and a few custom styles.