How to Create a Navigation Bar with Material-UI ? - GeeksforGeeks

13 Jul, 2021
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 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 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 install @material-ui/core
npm install @material-ui/icons
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.
Example:
Navbar.js
// Importing files from Material-UIimport React from 'react';import { makeStyles } from '@material-ui/core/styles';import AppBar from '@material-ui/core/AppBar';import Toolbar from '@material-ui/core/Toolbar';import Typography from '@material-ui/core/Typography';import IconButton from '@material-ui/core/IconButton';import MenuIcon from '@material-ui/icons/Menu';  // Using Inline Stylingconst useStyles = makeStyles((theme) => ({  root: {    flexGrow: 1,  },  menuButton: {    marginRight: theme.spacing(2),  },}));  // Exporting Default Navbar to the App.js Fileexport default function Navbar() {  const classes = useStyles();    return (    <div className={classes.root}>      <AppBar position="static">        <Toolbar variant="dense">          <IconButton edge="start"             className={classes.menuButton}             color="inherit" aria-label="menu">              <MenuIcon />          </IconButton>          <Typography variant="h6" color="inherit">            Geeks for Geeks          </Typography>        </Toolbar>      </AppBar>    </div>  );}
After creating the Navbar component, we will import it into our App.js file as shown below.
App.js
// Importing the navbar component inside// the main app fileimport Navbar from "./components/Navbar";  const App = () =>{  return (    <>      <Navbar/>             </>  );}  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/, you will see the following output.
Navbar Demo
Reference: https://material-ui.com/components/app-bar/
Material-UI
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data from one component to other component in ReactJS ?
ReactJS useNavigate() Hook
Axios in React: A Guide for Beginners
Re-rendering Components in ReactJS
How to set background images in ReactJS ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript