React MUI Menu API

MUI or Material-UI is a UI library providing predefined robust and customisable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI Menu API. The menu displays a list of choices of action that we can perform on the site. The API provides a lot of functionality and we will learn to implement them.

Import Menu API

import Menu from '@mui/material/Menu';
// or
import { Menu } from '@mui/material';

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

• children (node): It is the content of the component.
• classes (Object): Override the existing styles or add new styles to the component.
• component (elementType): It is the component used for the root node. It can be either an HTML string or a component.
• sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles.
• open(bool): If set to true, the component is visible. The default value is false.
• anchorEl: It is used to set the position of the menu.
• autoFocus(bool): If true, the component is focused automatically. The default value is true.
• disableAutoFocusItem(bool): If set to true, the menu will not focus on the active item when opening the menu. The default value is false.
• MenuListProps(props): It is the props applied to the MenuList element. The default value is an empty array.
• onClose(func): It is the callback fired when the component requests to be closed.
• PopoverClasses(object): It is the classes applied to the popover item.
• transitionDuration(auto/number/appear?: number, enter?: number, exit?: number ): It is the duration of the transition in ms. The default value is auto.
• TransitionProps(object): Props applied to the transition. The default value is null.
• variant(menu/selectedMenu): The variant to use. The default value is selectedMenu.

CSS Rules:

• root (.MuiMenu-root): It is the style applied to the root element.
• paper (.MuiMenu-paper): It is the style applied to the Paper component.
• list (.MuiMenu-list): It is the style applied to the List component via MenuList.

Syntax: Create a Menu as follows:

<Menu
      anchorEl={anchorEl}
      open={open}
      onClose={handleClose}
      anchorOrigin={{
        vertical: "top",
        horizontal: "left",
      }}
      transformOrigin={{
        vertical: "top",
        horizontal: "left",
      }}
    >
      <MenuItem>
        HTML
      </MenuItem>
      <MenuItem>
        CSS
      </MenuItem>
      <MenuItem>
        Javascript
      </MenuItem>
      <Divider />
</Menu>

Installing and Creating React app and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have a Menu.

App.js

Output:

Example 2: In the following example, we have changed the transition duration.

App.js

Output:

Reference: https://mui.com/material-ui/api/menu/