React MUI MenuItem API
Last Updated :
01 Aug, 2022
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.
App.js
import "./App.css";
import * as React from "react";
import Divider from "@mui/material/Divider";
import Paper from "@mui/material/Paper";
import MenuList from "@mui/material/MenuList";
import MenuItem from "@mui/material/MenuItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import Typography from "@mui/material/Typography";
import ContentCut from "@mui/icons-material/ContentCut";
import ContentCopy from "@mui/icons-material/ContentCopy";
import ContentPaste from "@mui/icons-material/ContentPaste";
import Cloud from "@mui/icons-material/Cloud";
import { Css, Html, Javascript } from "@mui/icons-material";
function App() {
return (
<div className="App">
<div
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI MenuItem API</strong>
</div>
<br />
<Paper sx={{
width: 320,
maxWidth: "100%",
margin: "auto"
}}>
<MenuList>
<MenuItem>
<ListItemIcon>
<Html fontSize="small" />
</ListItemIcon>
<ListItemText>HTML</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Css fontSize="small" />
</ListItemIcon>
<ListItemText>CSS</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Javascript fontSize="small" />
</ListItemIcon>
<ListItemText>Javascript</ListItemText>
</MenuItem>
<Divider />
<MenuItem>
<ListItemIcon>
<Cloud fontSize="small" />
</ListItemIcon>
<ListItemText>Cloud </ListItemText>
</MenuItem>
</MenuList>
</Paper>
</div>
);
}
export default App;
|
Output:
Example 2: In the following example, we have made the menu colorful using sx field.
App.js
import "./App.css";
import * as React from "react";
import Divider from "@mui/material/Divider";
import Paper from "@mui/material/Paper";
import MenuList from "@mui/material/MenuList";
import MenuItem from "@mui/material/MenuItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import Cloud from "@mui/icons-material/Cloud";
import { Css, Html, Javascript } from "@mui/icons-material";
function App() {
return (
<div className="App">
<div
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI MenuItem API</strong>
</div>
<br />
<Paper sx={{
width: 320,
maxWidth: "100%",
margin: "auto"
}}>
<MenuList>
<MenuItem
sx={{
backgroundColor: "lightgreen",
}}
>
<ListItemIcon>
<Html fontSize="small" />
</ListItemIcon>
<ListItemText>HTML</ListItemText>
</MenuItem>
<MenuItem
sx={{
backgroundColor: "lightsteelblue",
}}
>
<ListItemIcon>
<Css fontSize="small" />
</ListItemIcon>
<ListItemText>CSS</ListItemText>
</MenuItem>
<MenuItem
sx={{
backgroundColor: "lightseagreen",
}}
>
<ListItemIcon>
<Javascript fontSize="small" />
</ListItemIcon>
<ListItemText>Javascript</ListItemText>
</MenuItem>
<Divider />
<MenuItem>
<ListItemIcon>
<Cloud fontSize="small" />
</ListItemIcon>
<ListItemText>Cloud </ListItemText>
</MenuItem>
</MenuList>
</Paper>
</div>
);
}
export default App;
|
Output:
Reference: https://mui.com/material-ui/api/menu-item/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...