Create a responsive navbar with ReactJs.

Gautam Gunecha — Sun, 31 Jul 2022 16:45:31 +0000

Full View

Mobile View

Create a react app.

yarn create react-app navbar

Create a Navbar component and render it to App.js

import React from "react";
import Navbar from "./components/Navbar";

const App = () => {
  return (
    <>
      <Navbar />
    </>
  );
};

export default App;

Code for Navbar.js For Full View

import React from "react";
import "./Navbar.css";

const Navbar = () => {
  return (
<>
    <nav className="navbar">
      <h1>Navbar</h1>
      <ul>
        <li>Home</li>
        <li>Store</li>
        <li>About Us</li>
      </ul>

      <ul>
        <li>LogIn</li>
        <li>Register</li>
      </ul>
    </nav>
</>
  );
};

export default Navbar;

Css for Navbar for Full View.

.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.5em;
    border-bottom: 1px solid #ccc;
}

.navbar h1 {
    cursor: pointer;
    font-size: 20px;
}

.navbar ul {
    display: flex;
    align-items: center;
    gap: 1em;
}

.navbar ul li {
    cursor: pointer;
    list-style-type: none;
    font-size: 15px;
    font-weight: 600;
}

For Mobile

We need to install 3rd party dependency in order to use hamburger icon.
For this we will use react-icons library pack.

yarn add react-icons

Now to setup hamburger icon we have to import it from react-icons library pack.

import { GiHamburgerMenu } from "react-icons/gi";

and to display icon

import React, { useState } from "react";
import "./Navbar.css";
import { GiHamburgerMenu } from "react-icons/gi";

const Navbar = () => {
  return (
    <>
      <nav className="navbar">
        <h1>Navbar</h1>

        <ul>
          <li>Home</li>
          <li>Store</li>
          <li>About Us</li>
        </ul>

        <ul>
          <li>LogIn</li>
          <li>Register</li>
        </ul>

        <GiHamburgerMenu
          size={20}
          className="navbarIcon"
        />
      </nav>
    </>
  );
};

export default Navbar;

There are various approach for creating responsive ui for this project we will use css media query and react useState functionality to setup our ui condition and with jsx we will create new section with condition.

Complete Navbar code

import React, { useState } from "react";
import "./Navbar.css";
import { GiHamburgerMenu } from "react-icons/gi";

const Navbar = () => {
  const [show, setShow] = useState(false);

  const handleNavbarDisplay = () => {
    setShow(!show);
  };
  return (
    <>
      <nav className="navbar">
        <h1>Navbar</h1>

        <ul>
          <li>Home</li>
          <li>Store</li>
          <li>About Us</li>
        </ul>

        <ul>
          <li>LogIn</li>
          <li>Register</li>
        </ul>

        <GiHamburgerMenu
          onClick={() => handleNavbarDisplay()}
          size={20}
          className="navbarIcon"
        />
      </nav>

      {show && (
        <section className="navbarMobile">
          <p>Home</p>
          <p>Store</p>
          <p>About Us</p>
          <p>LogIn</p>
          <p>Register</p>
        </section>
      )}
    </>
  );
};

export default Navbar;

Complete css

.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.5em;
    border-bottom: 1px solid #ccc;
}

.navbar h1 {
    cursor: pointer;
    font-size: 20px;
}

.navbar ul {
    display: flex;
    align-items: center;
    gap: 1em;
}

.navbar ul li {
    cursor: pointer;
    list-style-type: none;
    font-size: 15px;
    font-weight: 600;
}

.navbarIcon {
    display: none;
}

/* Mobile Responsive CSS */

@media only screen and (max-width: 600px) {
    .navbar {
        justify-content: space-between;
        height: 70px !important;
    }

    .navbar ul {
        display: none;
    }

    .navbarIcon {
        display: block;
        cursor: pointer;
    }

    .navbarMobile {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
        padding: 20px;
        justify-content: flex-start;
        border-bottom: 1px solid #ccc;
    }

    .navbarMobile p {
        font-size: 18px;
        cursor: pointer;
        font-weight: 600;
    }
}

Thank You for reading out this article, also share your views and approach you guys take for creating responsive navbar.

DEV Community: Gautam Gunecha

Create a responsive navbar with ReactJs.