Responsive Navbar in Material UI React

Today, I will show you how to make a Responsive Menu bar in Material UI React. Responsive Navbar in Material UI React.

Responsvie Menubar in Material UI

We can make use of Bootstrap with react but I will use Material UI with React JS. To learn Material UI You can visit its official Website https://material-ui.com/ .Making a Responsive Header With MaterialUI and React

See our More Tutorials on ReactJS

Upload PDF file in React, Laravel

Image Crop in React JS

Display Selected Row record in Material UI Model Box using React

React dropdown select

So below is the Image of Menubar in Material UI. I have used one Search bar here and Many Components of Material UI.

Install Packages ( Dependencies )

– To Install React in Your System Use the below command

npx create-react-app project_name

– To Install Material UI in React

I am using Material UI for React, You can use Bootstrap for design, To install Material UI in your react project use the below command.

( Make sure that, You have npm or yarn support in your PC or Laptop. If you don’t have support then you can install npm and yarn from their official Website )

// with npm
npm install @material-ui/core 

//with yarn
yarn add @material-ui/core

I have used one Banner image and the banner image is available inside the images folder.

Now let’s start coding here. Copy below code inside Responsive.js file. You can see, I have imported many Icons and Components of Material UI.

src/Responsive.js

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 Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {Grid,Box,Paper} from '@material-ui/core';

import SearchIcon from '@material-ui/icons/Search';
import InputBase from '@material-ui/core/InputBase';

const useStyles = makeStyles((theme) => ({
    root: {
      //flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
     margin:"5px"
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color:"gray"
    },
    inputRoot: {
      color: 'black',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
      // vertical padding + font size from searchIcon
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        width: '12ch',
        '&:focus': {
          width: '20ch',
        },
      },
    },
    search: {
      position: 'relative',
      marginLeft:"20px",
      borderRadius: theme.shape.borderRadius,
      backgroundColor:"white",
      '&:hover': {
        backgroundColor: "white",
      },
      //marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(1),
        width: 'auto',
      },
    },
  }));

const Responsive = () => {
    const classes = useStyles();
    return (
        <div className={classes.root}>
        <AppBar position="static" >
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography  className={classes.title}>
              Home
            </Typography>
            <Typography  className={classes.title}>
              Product
            </Typography>
            <Typography  className={classes.title}>
              Sales
            </Typography>
            <Typography  className={classes.title}>
              Reports
            </Typography>
            <Grid container justify="flex-center">
              <div className={classes.search}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
              <InputBase
                placeholder="Search…"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'search' }}
              />
              </div>
            </Grid>
            <Grid container justify="flex-end">
              <Button color="inherit">Login</Button>
            </Grid>
          </Toolbar>
        </AppBar>

        <Grid container spacing={0}>
         <Grid item xs={12}>
           <img src="Images/banner-1.jpg" width="100%" height="400px"/>
         </Grid>
        </Grid> 
      </div>
    )
}

export default Responsive

Now call this Responsvie.js file inside the App.js file

import './App.css';
import Responsive  from'./Responsive'

function App() {
  return (
    <div className="App">
       <Responsive/>
    </div>
  );
}

export default App;

Now run the project using the npm start command. Your project will start running on a default react port http://localhost:3000/

Leave a Reply

Your email address will not be published. Required fields are marked *