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.
  1. npx create-react-app Matform

Install Material-UI

Now Install Material-UI by using the following command.
  1. 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.
  1. import React from 'react';
  2. import Button from '@material-ui/core/Button';
  3. import Menu from '@material-ui/core/Menu';
  4. import MenuItem from '@material-ui/core/MenuItem';
  5. import AppBar from '@material-ui/core/AppBar';
  6. import Toolbar from '@material-ui/core/Toolbar';
  8. export default function MenuDemo() {
  9. const [anchorEl, open] = React.useState(null);
  10. const handleClick = event => {
  11. open(event.currentTarget);
  12. };
  14. const handleClose = () => {
  15. open(null);
  16. };
  17. return (
  18. <>
  19. <AppBar position="static">
  20. <Toolbar style={{ 'paddingLeft': "600px" }}>
  21. Material UI Menu
  22. </Toolbar>
  23. </AppBar>
  24. <div>
  26. <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
  27. Open Menu
  28. </Button>
  29. <Menu
  30. id="Menu"
  31. anchorEl={anchorEl}
  32. keepMounted
  33. open={Boolean(anchorEl)}
  34. onClose={handleClose}
  35. >
  36. <MenuItem onClick={handleClose}>About</MenuItem>
  37. <MenuItem onClick={handleClose}>Contact</MenuItem>
  38. </Menu>
  39. </div>
  40. </>
  41. );
  42. }
Open app.js file and add the following code,
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import MenuDemo from './MenuDemo';
  5. function App() {
  6. return (
  7. <div className="App">
  8. <MenuDemo/>
  9. </div>
  10. );
  11. }
  13. 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.
  1. import React from 'react';
  2. import IconButton from '@material-ui/core/IconButton';
  3. import Menu from '@material-ui/core/Menu';
  4. import MenuItem from '@material-ui/core/MenuItem';
  5. import MoreVertIcon from '@material-ui/icons/MoreVert';
  6. import AppBar from '@material-ui/core/AppBar';
  7. import Toolbar from '@material-ui/core/Toolbar';
  8. const options = [
  9. 'About',
  10. 'Home',
  11. 'Contact',
  12. 'Demo',
  13. 'Test',
  14. 'React',
  15. ];
  17. const heigt = 25;
  19. export default function MenuDemo1() {
  20. const [anchorEl, setAnchorEl] = React.useState(null);
  21. const open = Boolean(anchorEl);
  23. const handleClick = event => {
  24. setAnchorEl(event.currentTarget);
  25. };
  27. const handleClose = () => {
  28. setAnchorEl(null);
  29. };
  30. return (
  31. <>
  32. <AppBar className="mrg" position="static">
  33. <Toolbar>
  34. <div style={{ 'paddingLeft': "600px" }}> Material UI Social media Icons</div>
  35. </Toolbar>
  36. </AppBar>
  37. <div>
  39. <IconButton
  40. aria-label="more"
  41. aria-controls="long-menu"
  42. aria-haspopup="true"
  43. onClick={handleClick}
  44. >
  45. <MoreVertIcon />
  46. </IconButton>
  47. <Menu
  48. id="long-menu"
  49. anchorEl={anchorEl}
  50. keepMounted
  51. open={open}
  52. onClose={handleClose}
  53. PaperProps={{
  54. style: {
  55. maxHeight: heigt * 4.5,
  56. width: 200,
  57. },
  58. }}
  59. >
  60. {options.map(option => (
  61. <MenuItem key={option} selected={option === 'Pyxis'} onClick={handleClose}>
  62. {option}
  63. </MenuItem>
  64. ))}
  65. </Menu>
  66. </div>
  67. </>
  68. );
  69. }
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 'DrawerDemo.js' and add the following code into this component,
  1. import React from 'react';
  2. import Drawer from '@material-ui/core/Drawer';
  3. import Button from '@material-ui/core/Button';
  4. import List from '@material-ui/core/List';
  5. import Divider from '@material-ui/core/Divider';
  6. import ListItem from '@material-ui/core/ListItem';
  7. import ListItemText from '@material-ui/core/ListItemText';
  8. import AppBar from '@material-ui/core/AppBar';
  9. import Toolbar from '@material-ui/core/Toolbar';
  10. export default function DrawerDemo() {
  11. const [state, setState] = React.useState({
  12. top: false,
  13. left: false,
  14. });
  16. const toggleDrawer = (side, open) => event => {
  17. if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
  18. return;
  19. }
  21. setState({ ...state, [side]: open });
  22. };
  24. const sideList = side => (
  25. <div
  26. role="presentation"
  27. onClick={toggleDrawer(side, false)}
  28. onKeyDown={toggleDrawer(side, false)}
  29. >
  30. <List>
  31. {['Home', 'About', 'Contact'].map((text, index) => (
  32. <ListItem button key={text}>
  33. <ListItemText primary={text} />
  34. </ListItem>
  35. ))}
  36. </List>
  37. <Divider />
  38. </div>
  39. );
  41. const fullList = side => (
  42. <div
  43. role="presentation"
  44. onClick={toggleDrawer(side, false)}
  45. onKeyDown={toggleDrawer(side, false)}
  46. >
  47. <List>
  48. {['Home', 'About', 'Contact'].map((text, index) => (
  49. <ListItem button key={text}>
  50. <ListItemText primary={text} />
  51. </ListItem>
  52. ))}
  53. </List>
  54. <Divider />
  55. </div>
  56. );
  58. return (
  59. <>
  60. <AppBar className="mrg" position="static">
  61. <Toolbar>
  62. <div style={{ 'paddingLeft': "600px" }}> Material UI Social media Icons</div>
  63. </Toolbar>
  64. </AppBar>
  65. <div>
  66. <Button color="primary" onClick={toggleDrawer('left', true)}>Open Left</Button>
  67. <Button color="primary" onClick={toggleDrawer('top', true)}>Open Top</Button>
  68. <Drawer open={state.left} onClose={toggleDrawer('left', false)}>
  69. {sideList('left')}
  70. </Drawer>
  71. <Drawer anchor="top" open={state.top} onClose={toggleDrawer('top', false)}>
  72. {fullList('top')}
  73. </Drawer>
  74. </div>
  75. </>
  76. );
  77. }
Open app.js file and add the following code,
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import DrawerDemo from './DrawerDemo';
  5. function App() {
  6. return (
  7. <div className="App">
  8. <DrawerDemo/>
  9. </div>
  10. );
  11. }
  13. export default App;
Run the project by using 'npm start' and check the result,
How To Use Material UI Menus In ReactJS Application
Click on Open Top button and check:
How To Use Material UI Menus In ReactJS Application

Summary

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