Creating a Responsive Navigation Bar with React

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;
    }
}