Building a Responsive Navbar with React

 🧭 Building a Responsive Navbar with React

A responsive navbar adapts to different screen sizes — typically collapsing into a hamburger menu on mobile devices. React makes it easy to build a reusable, interactive navbar using components and state.


📦 1. Set Up Your React Project

If you don’t have a React app set up yet:


bash

Copy

Edit

npx create-react-app responsive-navbar

cd responsive-navbar

npm start

📁 2. File Structure Example

bash

Copy

Edit

/src

  /components

    Navbar.js

    Navbar.css

  App.js

🧩 3. Create the Navbar Component

Navbar.js

jsx

Copy

Edit

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="logo">MySite</div>

      <div className={`nav-links ${isOpen ? "open" : ""}`}>

        <a href="/">Home</a>

        <a href="/about">About</a>

        <a href="/services">Services</a>

        <a href="/contact">Contact</a>

      </div>

      <div className="hamburger" onClick={toggleMenu}>

        <span className="bar"></span>

        <span className="bar"></span>

        <span className="bar"></span>

      </div>

    </nav>

  );

};


export default Navbar;

🎨 4. Style the Navbar

Navbar.css

css

Copy

Edit

/* Reset some styles */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


.navbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: #2c3e50;

  padding: 15px 20px;

  color: white;

  position: relative;

}


.logo {

  font-size: 1.5rem;

  font-weight: bold;

}


.nav-links {

  display: flex;

  gap: 20px;

}


.nav-links a {

  color: white;

  text-decoration: none;

  transition: color 0.3s;

}


.nav-links a:hover {

  color: #18bc9c;

}


.hamburger {

  display: none;

  flex-direction: column;

  cursor: pointer;

  gap: 5px;

}


.bar {

  width: 25px;

  height: 3px;

  background-color: white;

  transition: all 0.3s;

}


/* Responsive styles */

@media (max-width: 768px) {

  .nav-links {

    display: none;

    position: absolute;

    top: 60px;

    left: 0;

    background-color: #2c3e50;

    width: 100%;

    flex-direction: column;

    padding: 10px 0;

  }


  .nav-links.open {

    display: flex;

  }


  .hamburger {

    display: flex;

  }

}

🧪 5. Use the Navbar in Your App

App.js

jsx

Copy

Edit

import React from "react";

import Navbar from "./components/Navbar";


function App() {

  return (

    <div>

      <Navbar />

      <main style={{ padding: "20px" }}>

        <h1>Welcome to My Site</h1>

        <p>This is a responsive navbar built with React.</p>

      </main>

    </div>

  );

}


export default App;

✅ 6. Features & Tips

Features:

Mobile-first responsive design


Hamburger toggle using React state


Easy to customize and extend


Tips:

You can use react-router-dom for navigation instead of <a href="">


Add transitions or animations for smoother toggling


Replace text links with icons for a cleaner mobile design

Learn MERN Stack Course in Hyderabad

Read More

Handling Forms in React with Formik

Using Tailwind CSS in a MERN Stack App

Dark Mode Toggle in React

Lazy Loading Components in React

Visit Our Quality Thought Training in Hyderabad

Get Directions

Comments

Post a Comment

Popular posts from this blog

Entry-Level Cybersecurity Jobs You Can Apply For Today

🔐 Entry-Level Cybersecurity Jobs in Hyderabad 1. Cyber Security Analyst – L1 Company: Wipro Limited Location: Hyderabad Salary: ₹4–6 LPA Description: Assist with internal and external audits related to information security, maintain an information security risk register, and support security operations. Source:  Glassdoor 2. Security Analyst L1 Company: UltraViolet Cyber Location: Hyderabad Salary: ₹3–4 LPA Description: Identify and triage potential security incidents based on established procedures and playbooks; familiarity with security tools is beneficial. Source:  Glassdoor 3. Associate Information Security Analyst Company: NTT DATA Location: Hyderabad Experience: Entry-level Description: Handle security incidents end-to-end, work with various security technologies, and contribute to the development of security policies. Source:  Indeed 4. Cyber Security Analyst Company: Datametrics Software Systems Location: Hyderabad Salary: ₹4–6 LPA Description: Ensure security a...
Read more

Understanding Snowflake Editions: Standard, Enterprise, Business Critical

Understanding Snowflake Editions: Standard, Enterprise, Business Critical Snowflake offers several service editions to meet different business needs. These editions provide increasing levels of features, security, and compliance, depending on your organization's size, industry, and regulatory requirements. 1. Standard Edition Best for: Small to mid-sized teams or businesses that need core data warehousing features without advanced compliance needs. Key Features: Fully managed, cloud-native data platform Support for structured and semi-structured data Virtual warehouses for compute scaling Time Travel (1 day) – lets you query past versions of data Secure data sharing between Snowflake accounts Basic security with role-based access control Use Case Example: Startups or small companies analyzing business data without strict data compliance needs. 2. Enterprise Edition Best for: Organizations that need more control, scalability, and longer data retention. Includes everything in Standar...
Read more

Installing Tosca: Step-by-Step Guide for Beginners

🧪 Installing Tosca: Step-by-Step Guide for Beginners Tosca by Tricentis is a popular test automation tool used for end-to-end functional testing across various technologies like web, desktop, APIs, and more. Whether you're new to Tosca or setting it up for a QA team, this beginner-friendly guide walks you through the installation process step by step. ✅ System Requirements Before installation, make sure your system meets the minimum requirements: 🖥️ Hardware: CPU: Dual-core or higher RAM: Minimum 8 GB (16 GB recommended) Disk: 5+ GB of free space 💻 Software: OS: Windows 10 or 11 (64-bit) .NET Framework: 4.8 or later Microsoft SQL Server (for shared workspace, optional) Admin rights to install software 🔽 Step 1: Download Tosca Go to the official Tricentis Support Portal Create an account or log in. Navigate to Downloads > Tosca Testsuite Choose the latest stable version. Download the Tosca Installer (.exe) file. 🔐 You may need a valid Tricentis license or evaluation request ...
Read more