How to Create a Navigation Bar with Material-UI ?
Material UI is a front-end UI framework for React components designed by Google. It is built using Less which is a backward-compatible language extension for CSS. We have used AppBar component to create a Navigation Bar with Material-UI in ReactJS
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. folder name, move to it using the following command.
Step 3: After creating the React.js application, install the material-UI modules using the following command.
npm install @material-ui/core npm install @material-ui/icons
Project Structure: It will look like the following.
Example: Create a Navbar.js file where we will create our own Navbar component using material UI as shown below.
After creating the Navbar component, we will import it into our App.js file as shown below.
Step to Run Application: Run the application using the following command from the root directory of the project.
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.