React MUI MenuList API

Last Updated : 31 Aug, 2022

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.

Javascript

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.

Javascript

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; 