Level Up Your Web Development Skills: Responsive React Navbar

React Navbar: Welcome to Frontendgyaan! In this blog, we will learn how to create a responsive React navbar. If you want to enhance your frontend skills and create beautiful, interactive user interfaces, you’re in the right place!

The navbar is a crucial component of any website, providing users with easy navigation and access to different sections. With the rise of mobile devices and varying screen sizes, it’s essential to ensure that your navbar adapts seamlessly to different devices. That’s where responsive design comes into play.

Responsive design is an approach that allows web developers to create websites and applications that automatically adjust and optimize their layout and content based on the user’s device. By employing responsive techniques, we can ensure that our navbar looks great and functions well across various screen sizes, from large desktop displays to small mobile screens.

React, a popular JavaScript library for building user interfaces provides a robust foundation for creating responsive web applications. It’s component-based architecture and declarative syntax makes it a fantastic choice for constructing reusable and interactive UI elements like our navbar.

Before we start, make sure you have a basic understanding of HTML, CSS, and JavaScript. Familiarity with React will also be beneficial.

In the next section, we’ll set up our development environment and create a new React project. We’ll then proceed to build our navbar step by step, adding responsiveness along the way. So, buckle up and get ready to take your frontend skills to the next level!

React Js: Build Responsive React Navbar Example

• Step 1: Install React App
• Step 2: Install Essential Dependencies
• Step 3: Build Navbar with Styled Components
• Step 4: Create Pages in React
• Step 4: Define Routes in App Js
• Step 5: Start Development Server

Install React App

We are going to install create react app tool on our machine, however, if you have already installed make sure to jump on to the next step:

npx create-react-app project-name

Get inside the react application directory:

cd project-name

Install Essential Dependencies

In this step, we will be installing the styled-components, react-router-dom, and react icons libraries:

npm install --save styled-components

npm install react-icons

npm install react-router-dom

Build React Navbar with Styled Components

Next, create the components in the src folder and create the Header.jsx file; in this file, we will be creating the navbar elements for the responsive navbar.

import React,{Component} from 'react'
import { Link } from 'react-router-dom'
class Header extends Component {

  state={clicked: false};
  handleClick=() =>{
    this.setState({clicked: !this.state.clicked})

  }


  render(){
  return (
    <nav>
        <Link to={"/"} ><h1>Frontend Gyaan</h1> </Link>
        <main>
        <ul id="navb"  className={this.state.clicked ? "#navb active" : "#navb"}>
            <Link onClick={this.handleClick} to={"/"}>Home</Link>
            <Link onClick={this.handleClick} to={"/contact-us"}>Contact</Link>
            <Link onClick={this.handleClick} to={"/about-us"}>About</Link>
            <Link onClick={this.handleClick} to={"/blogs"}>Blogs</Link>
            <Link onClick={this.handleClick} to={"/learn"}>Learn</Link>
          </ul>
        </main>
        <div className="mobile" onClick={this.handleClick}>
            <i className={this.state.clicked ?"fas fa-times" : "fas fa-bars" }></i></div>

    </nav>
  )
}
}
export default Header

Define Routes in App Js

Head over to src/ folder, look for App.js file, start importing the pages, and use the react-router dom routing APIs to create routes in React.

import React from "react";
import { BrowserRouter as Router,Routes, Route } from "react-router-dom";
import Header from "./Components/Header";
import Home from "./Components/Home";

import "../src/styles/App.scss"
import "../src/styles/Header.scss"
import "../src/styles/Home.scss"



function App() {
  return (
    <div>
      <Router>
        <Header/>
        <Routes>
          <Route path="/" element={<Home/>} />
        </Routes>
        {/* <Footer/> */}
      </Router>

    </div>
  );
}

export default App;

CSS :

Next, create the styles in the src folder and create the app.scss file; in this file, we will be creating the navbar elements for the responsive navbar.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&display=swap');

*{
    margin:0%;
    padding: 0%;
    font-family: "Roboto",sans-serif;
    box-sizing: border-box;
    text-decoration: none;
    scroll-behavior:smooth;
}

Next, create colors.scss file

$first: white;
$second: #090c31;
$third: #5853ff;
$dark: rgb(44,44,44);
$text1: "Roboto";
$text2: cursive;

Next create a Header.css file

@import "colors";

nav {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  background-color: $first;
  top: 0%;
  z-index: 10;

  > h1 {
    text-transform: uppercase;
  }

  > main {
    width: 70%;
    display: flex;
    justify-content: flex-end;
    transition: 0.3s ease-in-out;

    > ul a {
      color: $dark;
      margin: 1rem;
      border-bottom: 2px solid transparent;

      &:hover {
        color: $third;
        border-bottom: 1px solid;
        transition: border-bottom 0.2s;
      }

      &:active {
        color: $third;
      }
    }
  }

  .mobile {
    display: none;
  }

  @media screen and (max-width: 760px) {
    div.mobile {
      display: block;
    }

    ul {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      position: fixed;
      top: 60px;
      right: -300px;
      height: 100vh;
      width: 40%;
      background: $first;
      box-shadow: 0 40px 60px;
      padding: 40px 0 0 10px;
      transition: 0.3s ease-in-out;
    }

    ul.active {
      right: 0px;
    }

    div.mobile i {
      font-size: 24px;
      cursor: pointer;
    }
  }

  @media screen and (max-width: 651px) {
    ul {
      top: 90px;
    }
  }
}

Run the App on the Browser

For running the react app make sure to execute the following command from the terminal:

npm start

Here is the URL you can use to view the nav bar on the browser:

https://localhost:3000

Conclusion

In this post, we have learned how to create a simple yet responsive navigation bar in React js application.

To build the responsive navigation in React, we took the help of react-router-dom, styled-components, and react icons libraries.

If you have any questions or suggestions along the way, feel free to leave a comment below. Let’s embark on this exciting journey of front-end development together!

GitHub Code: – https://github.com/saksham-raghuvanshi/react-project-1

Result: –