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
Lazy Loading Components in React
Visit Our Quality Thought Training in Hyderabad
Comments
Post a Comment