React MUI MenuItem 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 MenuList API. The menu displays a list of choices of action that we can perform on the site. MenuItem is each item displayed in the Menu. The API provides a lot of functionality and we will learn to implement them.

Import MenuItem API

import MenuItem from '@mui/material/MenuItem';
// or
import { MenuItem } 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.
• autoFocus (bool): If true, the component is focussed automatically. The default value is false.
• dense (bool): If set to true, compact vertical padding designed for keyboard and mouse input is used. 
• disableGutters (bool): If set to true, the left and right padding are removed.  The default value is false.
• divider (bool): If set to true, a 1px light border is added to the bottom of the menu item. The default value is false.
• focusVisibleClassName(string): It helps to identify the current keyboard focus. 

CSS Rules:

• root (.MuiModal-root): It is the style applied to the root element.
• focusVisible (.Mui-focusVisible): It is the state class applied to the root element if keyboard focused.
• dense (.MuiMenuItem-dense): It is the style applied to the root element if dense.
• disabled (.Mui-disabled): It is the state class applied to the root element if disabled is set to true.
• divider (.MuiMenuItem-divider): It is the style applied to the root element if the divider is set to true.
• gutters (.MuiMenuItem-gutters): It is the style applied to the inner `component` element unless disableGutters is set to true.
• selected(.Mui-selected): It is the state class applied to the root element if selected is set to true.

Syntax: Create a Menu with MenuItem as follows:

<MenuList>
      <MenuItem>HTML</MenuItem>
      ...
</MenuList>

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 with MenuItems.

Output:

 

Example 2: In the following example, we have made the menu colorful using sx field.

Output:

 

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