DEV Community

Cover image for How to Create a Responsive Navbar Using ReactJS
ziontutorial
ziontutorial

Posted on • Updated on • Originally published at ziontutorial.com

How to Create a Responsive Navbar Using ReactJS

Image description

πŸ‘‰ Live Demo - LIVE demo
πŸ‘‰ Website Link - source code

In this tutorial, I'll explain how to use ReactJS to create a responsive Navbar. which you can utilise for your undertaking.
To address the following issue, create a navigation bar using reactJS. This demonstrates how to use Reacts to construct a responsive menu bar.

The modules Required are :

npm
create-react-app
You need to install a node on your local system in order to create this navigation bar since we download and utilise some node module packages.

After installing the node just check your node version by putting this command in your terminal



node -v


Enter fullscreen mode Exit fullscreen mode

If you don’t please install the latest version.

All things are done you are ready to make a project using create-react-app so open your terminal and type :



npx create-react-app my-app


Enter fullscreen mode Exit fullscreen mode

Now enter the following command into the terminal to access your navigation-bar folder:



cd my-app


Enter fullscreen mode Exit fullscreen mode

I trust you have created the framework successfully up to this point. Let's start writing and creating our react js responsive navbar. Simply adhere to the instructions to create a responsive navigation bar using ReactJS.

πŸ‘‰Index.js



import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
); 


Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Index.css



@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --primary:#3F86F8;
  --background:#f5f811;
}

.primary {
  color: var(--primary);
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul{
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #333;
}

.container {
  max-width: 1240px;
  margin: auto;
}

h1 {
  font-size: 3.5rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.4rem;
  line-height: 1.2;
}

h5{
  font-size: 1.1rem;
  line-height: 1.2;
}

p{
  font-size: 1.2rem;
}

.btn {
  padding: 14px 32px;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: white;
  border-radius: 10px ;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  box-shadow:rgb(000/15%)0px 8px 24px;
}


input {
  padding:12px 32px;
  border: 1px solid var(--primary);
  background: transparent;
  border-radius: 24px 4px;
  font-size: 1rem;
  margin-right: .8rem;
  font-family: 'Poppins',sans-serif;

}


@media screen and (max-width:768px) {


h1 {
  font-size: 2.1rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.2;
}

h5{
  font-size: 1.1rem;
  line-height: 1.2;
}

p{
  font-size: 1rem;
}

.btn{
  width: 100%;
  margin: 1rem 0;
}

input {
  width: 100%;
}

}



body {
  margin: 0;
  font-family: 'Poppins', sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


Enter fullscreen mode Exit fullscreen mode

Utilizing the command, save all files and launch the server.

πŸ‘‰ App.js



import React, {useState} from 'react'
import {FaBars, FaTimes} from 'react-icons/fa'
import './Navbar.css'

const Navbar = () => {
const [click, setClick] = useState(false)
const handleClick = () => setClick(!click)


    return (
        <div className='header'>
            <div className='container'>
                <h1 className='logo' >Logo</h1>
                <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                    <li>
                        <a href='/'>Home</a>
                    </li>
                    <li>
                        <a href='/'>Featured</a>
                    </li>
                    <li>
                        <a href='/'>Earn</a>
                    </li>
                    <li>
                        <a href='/'>Contact</a>
                    </li>
                </ul>
                <div className='btn-group'>
                    <button className='btn'>Connect Wallet</button>
                </div>
                <div className='hamburger' onClick={handleClick}>
                    {click ? (<FaTimes size={20} style={{color: '#333'}}/>) : (<FaBars size={20} style={{color: '#333'}} />)}

                </div>
            </div>
        </div>
    )
}

export default Navbar


Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ App.css



.header {
    width: 100%;
    height: 90px;
    border-bottom: 1px solid #eee;
    /* background: #fff; */
    background: #000000;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 1rem;
}

.colors {
    color: var(--primary);
}

.nav-menu {
    display: flex;
}
.logo
{
  color: #FFE600;
   font-Size: 28px;
}

.nav-menu li {
    padding: 0 1rem;
}

.nav-menu a {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

.hamburger {
    display: none;
    cursor: pointer;
}


@media screen and (max-width:1240px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        flex-direction: column;
        justify-content: start;
        top: 90px;
        right: -100%;
        width: 50%;
        height: 100vh;
        transition: 0.4s;
        z-index: 2;
        background: rgb(0, 0, 0);
        border-left: 1px solid #eee;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu li {
        padding: 1rem;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-menu a {
        font-size: 1.2rem;
    }
}


Enter fullscreen mode Exit fullscreen mode

Conclusion

It worked! We sincerely hope you like our tutorial on how to use ReactJS to create a responsive navigation bar. Find comparable projects at ziontutorial.com, and let me know in the comments which one I should address next.

Check out this BMI calculator built with React and Hooks. Leave a comment if you have any queries. In the area provided, kindly write a comment on this project. You may also ask any queries in our Telegram channel, which is mostly available there.

Top comments (0)