How to Create a Navigation Bar with Material-UI ?

Last Updated : 26 Jul, 2024

The Navigation Bar Material UI component provides an efficient way to navigate through web application pages. React utilizes material UI NavBar for responsive and flexible navigation that is easy to implement and also provides animated transitions. 👁 Screenshot-from-2023-10-12-11-28-20

Approach

To create responsive top Navigation Bar Material UI provide multiple componentes MUI Appbar, Toolbar, Buttons mediaQuery that simply adds style to the projects. Also the collapsable list items are utilized for the hamburger Menu for small screen devices.

Steps to create the application:

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

npx create-react-app foldername

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

cd foldername

Step 3: After creating the React.js application, install the material-UI modules using the following command.

npm i @material-ui/core @material-ui/icons @mui/icons-material 
 @mui/material @emotion/core @emotion/react @emotion/styled

Project Structure

👁 Image

The updated dependencies in package.json will look like:

{
 "name": "myreactapp",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "@emotion/core": "^11.0.0",
 "@emotion/react": "^11.11.1",
 "@emotion/styled": "^11.11.0",
 "@material-ui/core": "^4.12.4",
 "@material-ui/icons": "^4.11.3",
 "@mui/icons-material": "^5.14.13",
 "@mui/material": "^5.14.13",
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
 },
}

Example: Example includes a navbar with responsive hamburger option to show listed menu items for small screens and a simple navbar for bigger screen devices.

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