Learn How to Build a Responsive Navbar in React | Easy Tutorial

Faraz

By Faraz -

Learn how to build a responsive navbar in React with our easy-to-follow tutorial. Perfect for beginners looking to enhance their web design skills.

Join us on Telegram
learn-how-to-build-a-responsive-navbar-in-react.webp
Read AlsoCreate a Responsive Bootstrap 5 Navbar with Topbar.jpgCreate a Responsive Bootstrap 5 Navbar with Topbar

Introduction

In modern web development, a responsive navbar is essential for a seamless user experience. It ensures that your website’s navigation adapts smoothly across various devices and screen sizes. This blog post provides a simple, step-by-step guide to creating a responsive navbar in React, designed for both beginners and seasoned developers. Let’s dive in and build a stylish and functional navbar that looks great on desktops, tablets, and mobile devices.

Why Create a Responsive Navbar?

A responsive navbar adjusts its layout according to the screen size, maintaining usability and visual appeal across different devices. This enhances user experience and ensures that your website remains accessible and attractive whether viewed on a desktop or mobile phone. By following this tutorial, you’ll learn how to create a responsive navbar that not only functions well but also adds a professional touch to your website.

Step-by-Step Guide

Step 1: Set Up Your React Project

First, ensure you have Node.js and npm installed on your computer. If not, download and install them from nodejs.org.

  1. Create a New React App: Open your terminal and run the following commands to create and navigate to your new React project: 
    npx create-react-app responsive-navbar
cd responsive-navbar

Step 2: Add Font and Icon Integration

  1. Update public/index.html: Integrate custom fonts and icons by editing the <head> section of your public/index.html file. Add the following lines: 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navbar</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div id="root"></div>
</body>
</html>

Step 3: Create the Navbar Component

  1. Create Navbar.js: In the src directory, create a new file named Navbar.js. Add the following code to create a responsive navbar component: 
    import React, { useState } from 'react';

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

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <header>
      <nav className="navbar">
        <div className="logo">Faraz</div>
        <ul className={`nav-links ${isOpen ? 'active' : ''}`}>
          <li><a href="#">Home</a></li>
          <li><a href="#">Fashion</a></li>
          <li><a href="#">Gadgets</a></li>
          <li><a href="#">Lifestyle</a></li>
          <li><a href="#">Video</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <div className="search">
          <input type="text" placeholder="Type to Search..." />
          <div className="search-icon">
            <i className="fa-solid fa-magnifying-glass"></i>
          </div>
        </div>
        <button className={`hamburger ${isOpen ? 'active' : ''}`} onClick={toggleMenu}>
          <span></span>
          <span></span>
          <span></span>
        </button>
      </nav>
    </header>
  );
};

export default Navbar;

Step 4: Style Your Navbar

  1. Create index.css: In the src directory, create a file named index.css and add the following styles to make your navbar responsive and visually appealing: 
    body {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #222;
}

.logo {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin: 6px 15px;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.nav-links a:hover {
  color: #f5bc04;
}

.search {
  display: inline-block;
  position: relative;
}

.search input {
  display: inline-block;
  width: 262px;
  height: 46px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  outline: none;
  border-radius: 5px;
  padding-left: 49px;
  color: #ffffff;
}

.search input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
}

.search-icon i {
  color: rgba(255, 255, 255, 0.2);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  height: 21px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: white;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(11px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-11px);
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 88px;
    left: 0;
    width: 100%;
    background-color: #222;
    text-align: center;
  }

  .nav-links.active {
    display: flex;
  }

  .hamburger {
    display: flex;
  }

  .navbar {
    position: relative;
  }
}

Step 5: Integrate Navbar into Your App

  1. Update App.js: Import and use the Navbar component in your main App.js file: 
    import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
    <div className="App">
      <Navbar />
      <div className="content">
        <h1>Welcome to My Website</h1>
        <p>This is a responsive and interactive navbar example in React with custom CSS.</p>
      </div>
    </div>
  );
}

export default App;

Step 6: Run Your Project

  1. Start the Development Server: In your terminal, navigate to your project directory and start the development server by running: 
    npm start

    Your application should open in your default web browser, displaying the responsive navbar in action.

Conclusion

Creating a responsive navbar in React is a valuable skill for enhancing your website's navigation. This guide has provided a clear and straightforward approach to setting up a React project, integrating custom fonts and icons, and building a responsive navbar. Whether you’re new to React or looking to refine your skills, this tutorial equips you with the knowledge to add a professional and functional navigation bar to your website.

Feel free to customize and extend the navbar to fit your unique design needs.

Responsive Navbar Live Demo ⟶

Read AlsoCreate Fire Animation HTML and JavaScript.jpgCreate Stunning Fire Animation Using HTML and CSS (Source Code)

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a responsive navbar in react, responsive navigation bar tutorial for react, step-by-step guide for react responsive navbar, create mobile-friendly navbar in react, header in react, responsive navbar, react navbar, navbar design, responsive navigation
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺