Material-UI is a UI library providing predefined robust and customizable 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. MenuList displays a menu of choices to the users and lets them choose an action to perform. It appears when the user interacts with a button or other control. The API provides a lot of functionality and we will learn to implement them.
Import MenuList API
import MenuList from '@mui/material/MenuList';
// or
import { MenuList } from '@mui/material';Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.
- autoFocus: If set to true, the list item is focused during the first mount. The default value is false.
- autoFocusItem(bool): If true, will focus the first menuitem if a variant is menu or selected item if variant selectedMenu. The default value is false.
- children(node): The content of the component.
- disabledItemsFocusable(bool): If set to true, will allow focus on disabled items. The default value is false.
- disableListWrap(bool): If set to true, the menu items will not wrap focus. The default value is false.
- variant( menu/selectedMenu): The variant to use. The default value is selectedMenu.
CSS Rules:
- root(.MuiMenuList-root): It is the style applied to the root element.
Syntax: Create a MenuList as follows:
<MenuList>
<MenuItem>
<ListItemText>
Android Development
</ListItemText>
...
</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 npm install @emotion/styled @mui/lab @mui/icons-material
Project Structure:
Step 4: Run the project as follows:
npm start
Example 1: In the following example, we have a basic MenuList.
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 { Android, Code, Html } from "@mui/icons-material";
function App() {
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI MenuList API</strong>
</div>
<br />
<center>
<Paper sx={{ width: 320, maxWidth: "100%" }}>
<MenuList>
<MenuItem>
<ListItemIcon>
<Android fontSize="small" />
</ListItemIcon>
<ListItemText>
Android Development
</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Html fontSize="small" />
</ListItemIcon>
<ListItemText>
Web Development
</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Code />
</ListItemIcon>
<ListItemText>
Algorithms
</ListItemText>
</MenuItem>
<Divider />
<MenuItem>
<ListItemIcon>
<Cloud fontSize="small" />
</ListItemIcon>
<ListItemText>
Cloud Development
</ListItemText>
</MenuItem>
</MenuList>
</Paper>
</center>
</div>
);
} export default App;
|
Output:
Example 2: In the following example, we have set the dense to true.
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 { Android, Code, Html } from "@mui/icons-material";
function App() {
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI MenuList API</strong>
</div>
<br />
<center>
<Paper sx={{ width: 320, maxWidth: "100%" }}>
<MenuList dense>
<MenuItem>
<ListItemIcon>
<Android fontSize="small" />
</ListItemIcon>
<ListItemText>
Android Development
</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Html fontSize="small" />
</ListItemIcon>
<ListItemText>
Web Development
</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Code />
</ListItemIcon>
<ListItemText>
Algorithms
</ListItemText>
</MenuItem>
<Divider />
<MenuItem>
<ListItemIcon>
<Cloud fontSize="small" />
</ListItemIcon>
<ListItemText>
Cloud Development
</ListItemText>
</MenuItem>
</MenuList>
</Paper>
</center>
</div>
);
} export default App;
|
Output:
Reference: https://mui.com/material-ui/react-menu/