How to Create a Clickable Navbar in React with CSS

Introduction

Creating a functional and visually appealing navbar is an essential part of web development, especially when using React. In this article, we will explore how to design a navbar where links change colors upon clicking—switching between white and yellow. We will use plain CSS along with React's state management to achieve this effect. This approach is simple enough to accommodate beginners yet effective for creating a clean user interface.

Why Use a Clickable Navbar?

A dynamic navbar enhances user experience by providing visual feedback. When users click a link and it changes color, they instantly understand which page they are on. Additionally, it helps in navigation clarity, improving overall site usability.

Step-by-Step Solution Using React and CSS

To create the click effect in your navbar, we'll follow these steps:

1. Setting Up Your React Environment


2. Creating the Navbar Component


3. Styling the Navbar with CSS

1. Setting Up Your React Environment

If you haven’t set up a React application yet, you can quickly do so using Create React App. Open your terminal and run:

npx create-react-app my-navbar-app

cd my-navbar-app

npm start

This will create a new React app and start the development server.

2. Creating the Navbar Component

Next, let’s create a new component named Navbar.js in the src directory. This component will contain the links that change colors when clicked.

// src/Navbar.js

import React, { useState } from 'react';

import './Navbar.css'; // Importing our CSS file



const Navbar = () => {

    const [activeLink, setActiveLink] = useState(''); // State to track the active link



    const handleLinkClick = (linkName) => {

        setActiveLink(linkName); // Update the active link

    };



    return (

        <nav className='navbar'>

            <ul>

                <li>

                    <a 

                        href='#'

                        className={activeLink === 'home' ? 'active' : ''}

                        onClick={() => handleLinkClick('home')}

                    >

                        Home

                    </a>

                </li>

                <li>

                    <a 

                        href='#'

                        className={activeLink === 'about' ? 'active' : ''}

                        onClick={() => handleLinkClick('about')}

                    >

                        About

                    </a>

                </li>

                <li>

                    <a 

                        href='#'

                        className={activeLink === 'services' ? 'active' : ''}

                        onClick={() => handleLinkClick('services')}

                    >

                        Services

                    </a>

                </li>

                <li>

                    <a 

                        href='#'

                        className={activeLink === 'contact' ? 'active' : ''}

                        onClick={() => handleLinkClick('contact')}

                    >

                        Contact

                    </a>

                </li>

            </ul>

        </nav>

    );

};



export default Navbar;

In this code snippet:

• We use useState to manage which link is currently active by tracking it with activeLink.


• The handleLinkClick function updates the active link whenever a user clicks on a navbar item.

3. Styling the Navbar with CSS

Now let’s create the CSS for our navbar. Create a file named Navbar.css in the src directory and add the following styles:

/* src/Navbar.css */

.navbar {

    background-color: #333;

    padding: 15px;

}



.navbar ul {

    list-style-type: none;

    padding: 0;

    display: flex;

}



.navbar li {

    margin-right: 20px;

}



.navbar a {

    color: white;

    text-decoration: none;

    transition: color 0.3s;

}



.navbar a.active {

    color: yellow;

}

In our CSS:

• The navbar has a dark background, and links are displayed inline within a flex container.


• The default color of the links is white, and when an item is active, it changes to yellow with a smooth transition effect.

Bringing It All Together

To see our navbar in action, we need to include it in the main App component. Modify your src/App.js file as follows:

import React from 'react';

import Navbar from './Navbar';



function App() {

    return (

        <div>

            <Navbar />

            <h1>Welcome to My App</h1>

        </div>

    );

}



export default App;

Now if you run the app, you should see the navbar on the screen. Clicking any of the links will turn it yellow while setting the previous link back to white.

Frequently Asked Questions

Can I use Tailwind CSS for a similar effect?

Absolutely! Tailwind CSS offers utility-first classes that simplify styling. You can achieve a similar effect using their predefined classes and adding state management for active links.

Is React necessary for a navbar?

No, but React simplifies dynamic rendering of UI components. You can achieve this functionality with plain HTML/CSS and JavaScript as well.

How do I add routing to the navbar?

You can integrate React Router for navigation to different components without refreshing the page. Wrap your links in Link components from react-router-dom instead of using anchor tags.

Conclusion

In this tutorial, we covered how to create a dynamic navbar with React and simple CSS styles. By following these steps, you can create an interactive user interface that improves navigation on your website. This approach demonstrates the versatility of React in building responsive web applications and enhances your frontend development skills.