Skip to content
Related Articles

Related Articles

How to Create a Navigation Bar with Material-UI ?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 13 Jul, 2021
Improve Article
Save Article

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.



// 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" 
            color="inherit" aria-label="menu">
              <MenuIcon />
          <Typography variant="h6" color="inherit">
            Geeks for Geeks

After creating the Navbar component, we will import it into our App.js file as shown below.


// Importing the navbar component inside
// the main app file
import Navbar from "./components/Navbar";
const App = () =>{
  return (
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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!