How To Use Material UI Menus In ReactJS Applications

Introduction

In this article, we will discuss React Material UI Menus. Menu is used to show a list of options. Material UI is one of the most popular UI frameworks developed by Google. The Material UI library is designed for faster, easier and developer-friendly user interface development. Now Material-UI is supported by all major browsers and platforms.

You can check my previous article in which we discussed ReactJS and its basic components from the below-mentioned links.

Prerequisites

Basic Knowledge of React
Visual Studio Code
Node and NPM installed
Material UI Installed

Create ReactJS project

Let's first create a React application using the following command.

npx create-react-app Matform

Install Material-UI

Now Install Material-UI by using the following command.

npm install @material-ui/core --save

Now, right-click on the "src" folder and add a new component named 'MenuDemo.js'. Add the following code in MenuDemo component.

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
export default function MenuDemo() {
const [anchorEl, open] = React.useState(null);
const handleClick = event => {
open(event.currentTarget);
};
const handleClose = () => {
open(null);
};
return (
<>
<AppBar position="static">
<Toolbar style={{ 'paddingLeft': "600px" }}>
Material UI Menu
</Toolbar>
</AppBar>
<div>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
Open Menu
</Button>
<Menu
id="Menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>About</MenuItem>
<MenuItem onClick={handleClose}>Contact</MenuItem>
</Menu>
</div>
</>
);
}

Open app.js file and add the following code,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import MenuDemo from './MenuDemo';
function App() {
return (
<div className="App">
<MenuDemo/>
</div>
);
}
export default App;

Run the project by using 'npm start' and check the result,

How To Use Material UI Menus In ReactJS Application

Now, right-click on the "src" folder and add a new component named 'MenuDemo1.js' and add the following code into this component.

import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
const options = [
'About',
'Home',
'Contact',
'Demo',
'Test',
'React',
];
const heigt = 25;
export default function MenuDemo1() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<AppBar className="mrg" position="static">
<Toolbar>
<div style={{ 'paddingLeft': "600px" }}> Material UI Social media Icons</div>
</Toolbar>
</AppBar>
<div>
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
id="long-menu"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={handleClose}
PaperProps={{
style: {
maxHeight: heigt * 4.5,
width: 200,
},
}}
>
{options.map(option => (
<MenuItem key={option} selected={option === 'Pyxis'} onClick={handleClose}>
{option}
</MenuItem>
))}
</Menu>
</div>
</>
);
}

Run the project by using 'npm start' and check the result,

Now, right-click on the "src" folder and add a new component named 'DrawerDemo.js' and add the following code into this component,

import React from 'react';
import Drawer from '@material-ui/core/Drawer';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
export default function DrawerDemo() {
const [state, setState] = React.useState({
top: false,
left: false,
});
const toggleDrawer = (side, open) => event => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ ...state, [side]: open });
};
const sideList = side => (
<div
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{['Home', 'About', 'Contact'].map((text, index) => (
<ListItem button key={text}>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
</div>
);
const fullList = side => (
<div
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{['Home', 'About', 'Contact'].map((text, index) => (
<ListItem button key={text}>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
</div>
);
return (
<>
<AppBar className="mrg" position="static">
<Toolbar>
<div style={{ 'paddingLeft': "600px" }}> Material UI Social media Icons</div>
</Toolbar>
</AppBar>
<div>
<Button color="primary" onClick={toggleDrawer('left', true)}>Open Left</Button>
<Button color="primary" onClick={toggleDrawer('top', true)}>Open Top</Button>
<Drawer open={state.left} onClose={toggleDrawer('left', false)}>
{sideList('left')}
</Drawer>
<Drawer anchor="top" open={state.top} onClose={toggleDrawer('top', false)}>
{fullList('top')}
</Drawer>
</div>
</>
);
}

Open app.js file and add the following code,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import DrawerDemo from './DrawerDemo';
function App() {
return (
<div className="App">
<DrawerDemo/>
</div>
);
}
export default App;

Run the project by using 'npm start' and check the result,

Click on Open Top button and check:

Summary

In this article, we learned how we can add Menu components in React applications using React material UI.