beginner#react#navigation bar#responsive design
Creating a Responsive Navigation Bar with React
Learn how to create a responsive navigation bar using React, including adding links and handling mobile devices.
Introduction to Responsive Navigation Bar
In this tutorial, we will build a responsive navigation bar using React. This navigation bar will include links to different pages and will be responsive on mobile devices.
Step 1: Setting Up the Project
First, we need to set up a new React project. We can do this by running the following command in our terminal:
npx create-react-app nav-bar-app
Step 2: Creating the Navigation Bar Component
Next, we need to create a new component for our navigation bar. We can do this by creating a new file called NavBar.js in the src directory:
import React from 'react';
function NavBar() {
return (
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
);
}
export default NavBar;
Step 3: Adding Responsive Design
To make our navigation bar responsive, we can add some CSS to our NavBar.js file:
import React from 'react';
import './NavBar.css';
function NavBar() {
return (
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
);
}
export default NavBar;
/* NavBar.css */
nav {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
/* Responsive design */
@media (max-width: 768px) {
nav {
flex-direction: column;
}
nav li {
display: block;
}
}