How To Create a Navbar Component in React

Recently, I was working on a React project for a client in New York where I had to build a clean, responsive navigation bar that worked well on both desktop and mobile screens.

At first, I thought it would be simple, just a few links and some CSS. But soon, I realized that handling responsiveness, state toggling for mobile menus, and reusability needed a bit more planning.

So, in this article, I’ll walk you through exactly how I created a Navbar component in React, the same one I use in my own projects. I’ll show you two simple methods: one using basic React and CSS, and another using React with styled-components for a more elegant, scalable approach.

Table of Contents

What We’ll Build

We’ll create a responsive navigation bar that includes:

A logo or brand name
Navigation links (Home, About, Services, Contact)
A hamburger menu for mobile screens
Smooth toggle animations

Here’s a quick preview of the structure we’ll build:

Navbar
 ├── Logo
 ├── Nav Links
 └── Mobile Menu Toggle

Method 1 – Create a Navbar Using React and CSS

This is the simplest and most common approach. It’s perfect if you want a clean, lightweight navbar without adding extra libraries.

Step 1 – Create a New React App

If you don’t already have a React app set up, open your terminal and run:

npx create-react-app react-navbar
cd react-navbar
npm start

This will set up a new React project and start the development server.

Step 2 – Create the Navbar Component

Inside the src folder, create a new file called Navbar.js.

Then, add the following code:

import React, { useState } from "react";
import "./Navbar.css";

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

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

  return (
    <nav className="navbar">
      <div className="nav-logo">MyReactApp</div>

      <div className={`nav-links ${isOpen ? "open" : ""}`}>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
      </div>

      <div className="nav-toggle" onClick={toggleMenu}>
        <div className="bar"></div>
        <div className="bar"></div>
        <div className="bar"></div>
      </div>
    </nav>
  );
};

export default Navbar;

Step 3 – Add CSS Styling

Now, create a file named Navbar.css in the same folder and add this CSS:

/* Navbar.css */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0b3d91;
  padding: 15px 30px;
  color: white;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

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

.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 4px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    background-color: #0b3d91;
    flex-direction: column;
    width: 100%;
    text-align: center;
    display: none;
  }

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

  .nav-toggle {
    display: flex;
  }
}

Step 4 – Use the Navbar in Your App

Open App.js and import the Navbar component:

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

function App() {
  return (
    <div>
      <Navbar />
      <section id="home">
        <h1>Welcome to My React App</h1>
      </section>
    </div>
  );
}

export default App;

Now, run your app again with:

npm start

You can see the output in the screenshot below.

You’ll see your new responsive navbar in action! On smaller screens, the links collapse into a hamburger menu.

Method 2 – Create a Styled Navbar Using Styled-Components

If you prefer keeping your styles inside your component files, styled-components is a great option. It’s widely used in modern React projects and makes it easier to manage scoped styles.

Step 1 – Install Styled-Components

Run this command in your terminal:

npm install styled-components

Step 2 – Create a Styled Navbar Component

Create a new file StyledNavbar.js and add the following code:

import React, { useState } from "react";
import styled from "styled-components";

const Nav = styled.nav`
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #003366;
  padding: 15px 30px;
  color: white;
`;

const Logo = styled.div`
  font-size: 1.5rem;
  font-weight: bold;
`;

const Links = styled.div`
  display: flex;
  gap: 20px;

  a {
    color: white;
    text-decoration: none;
    font-weight: 500;

    &:hover {
      color: #ffcc00;
    }
  }

  @media (max-width: 768px) {
    position: absolute;
    top: 60px;
    right: 0;
    background: #003366;
    flex-direction: column;
    width: 100%;
    text-align: center;
    display: ${({ open }) => (open ? "flex" : "none")};
  }
`;

const Toggle = styled.div`
  display: none;
  flex-direction: column;
  cursor: pointer;

  div {
    width: 25px;
    height: 3px;
    background: white;
    margin: 4px 0;
  }

  @media (max-width: 768px) {
    display: flex;
  }
`;

const StyledNavbar = () => {
  const [open, setOpen] = useState(false);

  return (
    <Nav>
      <Logo>ReactUSA</Logo>
      <Links open={open}>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
      </Links>
      <Toggle onClick={() => setOpen(!open)}>
        <div></div>
        <div></div>
        <div></div>
      </Toggle>
    </Nav>
  );
};

export default StyledNavbar;

Step 3 – Use It in Your App

Replace the previous Navbar in App.js with this one:

import React from "react";
import StyledNavbar from "./StyledNavbar";

function App() {
  return (
    <div>
      <StyledNavbar />
      <main>
        <h2>Building Modern React Apps in the USA</h2>
        <p>Explore how React simplifies frontend development.</p>
      </main>
    </div>
  );
}

export default App;

You can see the output in the screenshot below.

Now you have a modern, styled, and fully responsive Navbar without a separate CSS file.

Pro Tips

Use React Router to make your navbar links navigate between pages:

  npm install react-router-dom

Then wrap your <a> tags with <Link> from react-router-dom.

Add animations using Framer Motion for smooth menu transitions.
Keep your Navbar reusable by passing props like links, logoText, or backgroundColor.

Both methods work great; the CSS-based approach is perfect for quick projects, while the styled-components method is better for scalable apps.

I personally use the styled-components version in most of my React projects because it keeps everything modular and easy to maintain.

You may read:

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/