Open In App
Related Articles

How to create Menu Item Component in ReactJS ?

Like Article
Save Article
Report issue

React JS is a popular JavaScript library used for building user interfaces. It provides a component-based architecture that allows developers to create reusable UI elements. Material UI for React has this component available for us and it is very easy to integrate. We can use Menu Component in ReactJS using the following approach.


Approach to create Menu Component:

  • Component Setup:
    • App.js uses Material-UI components to create a simple menu UI in React.
    • State is managed using the useState hook, to track the anchor element for menu positioning.
  • Event Handling:
    • Two functions, handleClick and handleClose, are defined to manage the opening and closing of the menu.
    • handleClick sets the anchor element based on the click event, and handleClose resets the anchor element to null, closing the menu.
  • Rendering and Interaction:
    • The component renders a button labeled “Open Menu List,” and clicking this button opens the menu.
    • The menu contains some items such as “My Account,” “Settings,” “Profile,” and “Logout.” Selecting an item calls the handleClose function, closing the menu.

Steps for Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command:

npm install @material-ui/core

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
"@material-ui/core": "^4.12.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",

Example: Now write down the following code in the App.js file.


import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
const App = () => {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const handleClose = () => {
    const handleClick = (event) => {
    return (
                marginLeft: "40%",
            <h2>How to use Menu Component in ReactJS?</h2>
                Open Menu List
                <MenuItem onClick={handleClose}>
                    My Account
                <MenuItem onClick={handleClose}>
                <MenuItem onClick={handleClose}>
                <MenuItem onClick={handleClose}>
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 11 Dec, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials