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.

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

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/