DEV Community

Chittoji Murali Sree Krishna
Chittoji Murali Sree Krishna

Posted on • Updated on

Responsive Navbar @material-ui, react-router-dom

I have done a Responsive navbar with material-ui and react-router-dom,


dependencies used:

npm install @material-ui/core
npm install @material-ui/icons
npm install @fontsource/roboto
npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode

customizing the theme

To customize the theme we have to import these modules first:

import Header from "./Components/Header";
// to use fontRoboto
import "fontsource-roboto";
// importing paper and container from core
import { Paper, Container } from "@material-ui/core";

// these are for customizing the theme
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
/* material shell also provide the colors we can import them like these */
import { green, orange } from "@material-ui/core/colors";
Enter fullscreen mode Exit fullscreen mode

Customize the theme we have to create the variable with createMuiTheme:

const theme = createMuiTheme({
  typography: {
    h1: {
     /* this will change the font size for h1, we can also do 
        it for others, */
      fontSize: "3rem",
  palette: {
    /* this is used to turn the background dark, but we have 
        to use Paper for this inOrder to use it. */
    type: "dark",
    primary: {
     // main: colorName[hue],
     // we have to import the color first to use it
      main: green[600],
    secondary: {
      main: orange[400],
Enter fullscreen mode Exit fullscreen mode

now we have to wrap the components we use with ThemeProvider and now we pass the variable as prop to this

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Paper style={{ height: "200vh" }}>
          <Header />

export default App;
Enter fullscreen mode Exit fullscreen mode

the things which are inside the ThemeProvider can use the newly created theme

NavBar Starts from here


TO use the
navgation bar with material-ui, we have to import {AppBar}, and using {ToolBar} for extra padding,
for making the nav bar responsive we have to use {useMediaQuery} for break the screen with breakpoints
to use the dropMenu we have to import {Menu, MenuItem}

For breaking the screen width in material-ui we can use px or buitin sizes ex: {xl,lg,mg,sm,xs} we are assigning a new variable and making it as boolean type:

import React from "react"
import { AppBar, Toolbar, Typography, useMediaQuery, Menu, MenuItem, Button } from "@material-ui/core"
import MenuIcon from "@material-ui/icons/Menu";

const Example () => {
/* Creating 2 variables for opening and closing the menu for mobile version */
const [anchor, setAnchor] = React.useState(null);
const open = Boolean(anchor);

/* Creating a function to handle manu: */
const handleMenu = (event) => {

const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
{isMobile ? (<>
<IconButton onClick={handleMenu}>
<MenuIcon />
   /* to open the anchor at the top below the cursor */
   /* anchor origin so that it open it that location */
   vertical: "top",
   horizontal: "right"
   vertical: "top",
   horizontal: "right"
   onClick={() => setAnchor(null)}
  <HomeIcon />
  <Typography variant="h6"> Home</Typography>
</>) : (<Button>Home</Button>)}
export default Example
Enter fullscreen mode Exit fullscreen mode

to use react-router-dom with material-ui:

import {Button} from "@material-ui/core"
// these are required components to work on
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

// importing pages
import Home from "./Home"
import Example from "./Example"

const browser = () =>{
/* we can use this link in other pages also on any clickable 
   objects, but import it first. */
<Button component={Link} to={process.env.PUBLIC_URL + "/"}>Home</Button>
<Button component={Link} to={process.env.PUBLIC_URL + "/Example"}>Example</Button> 
/* you have to create the pages and import them if not it 
   shows error */
<Route exact path={process.env.PUBLIC_URL + "/"} component={Home} />
<Route exact path={process.env.PUBLIC_URL + "/Example"} component={Example}>
export default Browser;
Enter fullscreen mode Exit fullscreen mode

live link in codesandbox:

github :

i tried my best to explain, Hope you guys like it. :)

Top comments (4)

sakalpatil profile image

Its an Innovation!!

cmuralisree profile image
Chittoji Murali Sree Krishna

Thank you 🙂

h4mzadevs profile image
Hamza Ghariani

Great work really 😁

cmuralisree profile image
Chittoji Murali Sree Krishna

Thank you 🙂