Responsive Navbar in React Js using React Router

Hey everyone, I hope you are all fine, let’s build a responsive navbar in React JS using React Router Dom from scratch. Making a responsive navbar in React JS is an elementary side of recent internet growth. As customers increasingly enter websites from a wide range of units, from desktops to smartphones, it is essential to make sure that navigation parts modify seamlessly to different display sizes.

A responsive navbar enhances a person’s expertise by offering intuitive and accessible navigation whatever the gadget used. This text will discover the important ideas and greatest practices for designing a responsive navbar in React JS, specializing in key issues corresponding to structure, styling, and interactivity.

By the top of this information, you will have a stable understanding of tips on how to implement a responsive navbar that meets the wants of right now’s various person base.

Responsive Navbar in React Js using React Router

Before moving the codes you need to watch the video tutorial that will help you understand each step by creating a responsive navbar from scratch.

I hope you’ve seen the complete video and you’ve learned many new things from the tutorial. Let’s see the codes that are used to build a responsive navbar in React JS with React Router Dom.

You May Also Like:

• How to Make a Quiz App in React JS
• How to Make Form Validation in React JS
• Create a Multi-Step Form in React JS
• How to Create Todo App in React JS
• How to Make An Accordion in React JS

Navigation Structure

Understanding the fundamental structure of a navbar is step one. A typical navbar consists of hyperlinks to numerous sections of the website, an emblem or model title, and probably different parts corresponding to a search bar or person profile icon.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import Product from "./pages/Product";
import Pricing from "./pages/Pricing";
import Contact from "./pages/Contact";
import NotFound from "./pages/NotFound";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="product" element={<Product />} />
        <Route path="pricing" element={<Pricing />} />
        <Route path="contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

React Parts

React JS permits builders to create reusable elements. For a responsive navbar, you may create separate elements for the principal navigation, the model/emblem, and any extra options corresponding to a search bar or person profile.

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

function HomePage() {
  return (
    <div>
      <Navbar />
      <h2> Responsive Navbar </h2>
    </div>
  );
}

export default HomePage;

State Administration

Managing the state in React is essential for dealing with dynamic interactions. For instance, state can be utilized to trace whether or not the cell menu is open or closed, or to handle person authentication standing.

import React, { useState } from "react";
import { NavLink, Link } from "react-router-dom";
import Logo from "../assets/logo.svg";

function Navbar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <header>
      <div className="container">
        <div className="menus">
          <Link to="/">
            <img src={Logo} alt="" />
          </Link>
          <nav>
            <ul className={isOpen ? "display" : ""}>
              <div className="btn" onClick={() => setIsOpen(false)}>
                <i className="fas fa-times close-btn"></i>
              </div>
              <li>
                <NavLink to="/">Home</NavLink>
              </li>
              <li>
                <NavLink to="/product">Product</NavLink>
              </li>
              <li>
                <NavLink to="/pricing">Pricing</NavLink>
              </li>
              <li>
                <NavLink to="/contact">Contact</NavLink>
              </li>
            </ul>
          </nav>
          <div className="btn" onClick={() => setIsOpen(true)}>
            <i className="fas fa-bars menu-btn"></i>
          </div>
        </div>
      </div>
    </header>
  );
}

export default Navbar;

Styling

Styling is important for a responsive navbar. Utilizing CSS-in-JS libraries like styled components or conventional CSS/SASS will help in designing a navbar that appears nice on all units. Media queries play a key function in adapting the navbar structure for various display sizes.

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

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

body {
  background-color: #ddd;
  font-family: "rubik";
  background: url("./assets/bg.jpg") no-repeat center center/cover;
  height: 100vh;
  position: relative;
}

body::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

header {
  background-color: rgba(51, 0, 96, 0.4);
  padding: 2rem 0;
}

.menus {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  display: flex;
  list-style-type: none;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 0.6rem;
}

nav ul li a.active {
  background-color: #fff;
  color: #000;
  border-radius: 5px;
}

h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  font-size: 4rem;
  color: #fff;
}

.btn {
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: none;
}

Responsive Design Strategies

Implementing responsive design ideas ensures that the navbar features nicely throughout numerous units. This consists of utilizing versatile grid layouts, relative items, and responsive pictures.

@media (max-width: 768px) {
  .btn {
    display: block;
  }

  nav ul {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 300px;
    height: 100vh;
    top: 5px;
    right: -100%;
    background-color: rgba(51, 0, 96, 0.9);
    padding: 5rem 0;
    transition: all 0.5s ease-in;
  }

  nav ul.display {
    right: 0;
    transition: all 0.9s ease-in-out;
  }

  nav ul a {
    display: block;
    margin: 10px;
  }

  .close-btn {
    position: absolute;
    top: 0.5rem;
    left: 14rem;
    margin: 25px;
  }
  h2 {
    font-size: 2rem;
  }
}

Interactivity

Including interactivity to the navbar enhances a person’s expertise. This consists of implementing dropdown menus, hovering results, and click-on occasions. React’s occasion dealing with makes it easy to handle personal interactions.

Accessibility

Guaranteeing the navbar is accessible to all customers, together with those with disabilities, is vital. This includes utilizing semantic HTML, and ARIA roles, and guaranteeing keyboard navigability.

Third-Occasion Libraries

There are quite a few libraries and frameworks that may simplify the creation of a responsive navbar. Libraries corresponding to React Bootstrap, Materials-UI, and Tailwind CSS present pre-designed elements and utilities that may velocity up growth.

Conclusion

Constructing a responsive navbar in React JS includes combining numerous ideas and strategies to create a seamless and user-friendly navigation expertise. By understanding the core elements, using state administration, making use of responsive design ideas, including interactivity, and guaranteeing accessibility, builders can create navbars that improve the usability and performance of their internet purposes.

With the best instruments and practices, a well-designed responsive navbar can considerably enhance personal satisfaction and engagement.