Skip to main content
react-md
react-md - Menu - Demos

Menu

Menus within react-md can be created by using the following components:

  • DropdownMenu - a nice default implementation that renders a <Button> and a <Menu> together and handles the menu's visibility
  • MenuItem - one of the actions inside of the <Menu>
  • MenuItemLink - a <Link> specifically to be used inside of a <Menu>
  • MenuItemSeparator - a <Divider> specifically to be used inside of a <Menu>
  • 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. Requires the @react-md/form package.
  • MenuItemCheckbox - Render a <Checkbox> as a MenuItem. Requires the @react-md/form package.
  • MenuItemSwitch - Render a <Switch> as a MenuItem. Requires the @react-md/form package.
  • MenuItemFileInput - Render a <FileInput> as a MenuItem. Requires the @react-md/form package.
  • MenuItemTextField - Render a <TextField> as a MenuItem. Requires the @react-md/form package.

In addition, menus have some built-in keyboard behavior:

  • Pressing the ArrowDown/ArrowUp keys will focus the next/previous menu item
  • Pressing the Home/End keys will focus the first/last menu item.
  • Typing a letter will move focus to the next menu item that starts with that letter
  • Pressing the Escape/Tab keys will close the menu

Simple Example

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

Configurable Dropdown Menu

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

Button Props
Menu Props
MenuItem Props

Floating Action Button Menus

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

Example

Simple Context Menu

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.

Nested Dropdown Menus

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.

Mobile Action Sheet

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.

renderAsSheetphone

Hoverable Menus

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 requires a more screen real estate than what is available so you will need to open it in a full page dialog.