React MUI Menu Navigation

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Menu Navigation. The menu navigation component displays a list of choices on temporary surfaces.

Menu Variants:

• Basic menu: It is a basic menu that opens over the anchor element by default.
• Icon menu: In this variant, icons are used with the menu to display the menu items.
• Dense menu: For any menu that has a long list or long text, the dense prop reduces the padding and text size.
• Selected menu: In this variant, one item is already selected in the menu.
• Positioned menu: As the menu uses a popover component to position itself, therefore menus are also positioned with the same props.
• MenuList composition: The MenuList component is used to handle the focus.
• Account menu: For creating an account menu, the content can be mixed with the Avatar component.
• Customization: The menu component can be customized with custom styles. As the MenuItem is a wrapper on the ListItem component, one can use the same list composition features with this MenuItem component.
• Max height menu: The menu can scroll be defined to scroll internally if its height menu prevents all items from being displayed. This can be customized using the maxHeight property.
• Limitations: There are limitations in menu navigation due to a flexbox bug, like text-overflow. We can use noWrap with the Typography component to solve this.
• Change transition: Different transitions can be used in the menu navigation. This is defined using the TransitionComponent property.
• Context menu: A context menu can also be used to open the menu with the right-click event. This can be configured using the onContextMenu property of an element.
• Unstyled: One can use an unstyled variation of the menu component.
• API: The APIs list are: 
  • <ClickAwayListener />
  • <Menu />
  • <MenuItem />
  • <MenuList />
  • <Popover /> 
  • <Popper />

Syntax:

<Button>
    Click
</Button>

<Menu>
    <MenuItem>...</MenuItem>
    <MenuItem>...</MenuItem>
</Menu>

Creating React Project:

Step 1: To create a react app, install react modules through npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: Below example demonstrates the React MUI Icon menu. In this example, the menu component consists of the material icons.

Javascript

import { Print, Save, Share } from "@mui/icons-material";
import {
    Divider,
    ListItemIcon,
    ListItemText,
    MenuItem,
    MenuList,
    Paper,
    Typography,
} from "@mui/material";
import React from "react";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Menu Navigation</h2>
            </div>
            <div>
                <Paper sx={{ width: 320, maxWidth: "100%" }}>
                    <MenuList>
                        <MenuItem>
                            <ListItemIcon>
                                <Save fontSize="small" />
                            </ListItemIcon>
                            <ListItemText>Save</ListItemText>
                        </MenuItem>
                        <MenuItem>
                            <ListItemIcon>
                                <Share fontSize="small" />
                            </ListItemIcon>
                            <ListItemText>Share</ListItemText>
                        </MenuItem>
                        <MenuItem>
                            <ListItemIcon>
                                <Print fontSize="small" />
                            </ListItemIcon>
                            <ListItemText>Print</ListItemText>
                        </MenuItem>
                        <Divider />
                        <MenuItem>
                            <Typography>Add your content</Typography>
                        </MenuItem>
                        <MenuItem>
                            <Typography>Define spacing</Typography>
                        </MenuItem>
                    </MenuList>
                </Paper>
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI Positioned menu. In this example, the menu component uses the popover props to position itself, and here it has been aligned to the “bottom right” position.

Javascript

import { Print, Save, Share } from "@mui/icons-material";
import {
    ListItemIcon,
    ListItemText,
    Menu,
    MenuItem,
    Button
} from "@mui/material";
import * as React from "react";
import { useState } from "react";

function App() {

    const [menu, setMenu] = useState(null);
    const open = Boolean(menu);
    const handleClick = (e) => {
        setMenu(e.currentTarget);
    };

    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Menu Navigation</h2>
            </div>
            <div>
                <Button
                    id="button"
                    aria-haspopup="true"
                    aria-expanded={open ? 'true' : undefined}
                    onClick={handleClick}
                    color="secondary"
                    variant="contained"
                >
                    Open
                </Button>
                <Menu
                    id="menu"
                    anchorEl={menu}
                    open={open}
                    anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'right',
                    }}
                >
                    <MenuItem>
                        <ListItemIcon>
                            <Save fontSize="small" />
                        </ListItemIcon>
                        <ListItemText>Save</ListItemText>
                    </MenuItem>
                    <MenuItem>
                        <ListItemIcon>
                            <Share fontSize="small" />
                        </ListItemIcon>
                        <ListItemText>Share</ListItemText>
                    </MenuItem>
                    <MenuItem>
                        <ListItemIcon>
                            <Print fontSize="small" />
                        </ListItemIcon>
                        <ListItemText>Print</ListItemText>
                    </MenuItem>
                </Menu>
            </div>
        </center>
    );
}

export default App;

Output:

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