Skip to content
Related Articles

Related Articles

Improve Article

How to Create a Navigation Bar with Material-UI ?

  • Last Updated : 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 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

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-UI
import 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 Styling
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
}));
  
// Exporting Default Navbar to the App.js File
export 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 file
import 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/




My Personal Notes arrow_drop_up
Recommended Articles
Page :