Create Store Navigation using React and Tailwind CSS

Last Updated : 30 Sep, 2024

We will build a simple Store Navigation system using React and Tailwind CSS and React Icons. The navigation bar will have links to different store sections such as Home and Products and Cart and Profile. Each link will be styled with icons accompanying them to make the UI more intuitive.

We will also include a responsive design that adapts to different screen sizes. The output will display a responsive navigation bar with icons for Home and Products and Cart and Profile. On smaller screens, a mobile-friendly version of the navigation bar will be displayed at the bottom of the screen.

Prerequisites

Approach

This React app uses Tailwind CSS and FontAwesome icons to create a responsive navigation menu. Users can click links to switch between different sections like "Home" and "Profile." Tailwind's utility classes handle the layout and styling, while the app is made responsive with separate desktop and mobile views. The tailwind.config.js adds custom colors for a consistent theme across the app. The design is clean and interactive, offering smooth transitions when switching between sections.

Steps to Create & Configure the Project

Here we will create a sample React JS project and install Tailwind CSS once it is completed we will start development for store Navigation using React and Tailwind CSS. Below are the Steps to create and configure the project:

Step 1: Set up a React Application

First, create a sample React JS application using the mentioned command then navigate to the project folder.

npx create-react-app react-app
cd react-app

Project Structure:

Screenshot-2024-09-12-114329 — Project Structure

Updated dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Step 2: Install and Configure Tailwind CSS

Once Project is created successfully Now install and configure the Tailwind css by using below commands in your project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Develop Business logic

Once Tailwind css installation and configuration is completed. Now we need to develop user interface for Store Navigation using tailwind CSS and for making it responsive we will use App.js and App.css files.

App.js ( src\App.js )
index.css ( src\index.js )
tailwind.config.js ( tailwind.config.js )

Example: This demonstrates the creation of Store Navigation using React and Tailwind CSS.

CSS

/*index.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

body {

    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
}

JavaScript

//App.js
import React, { useState } from 'react';
import { FaHome, FaBoxOpen, FaShoppingCart, FaUser } from 'react-icons/fa';
import './App.css';

function App() {
    const [activeLink, setActiveLink] = useState('Home');

    const links = [
        { name: 'Home', icon: <FaHome /> },
        { name: 'Products', icon: <FaBoxOpen /> },
        { name: 'Cart', icon: <FaShoppingCart /> },
        { name: 'Profile', icon: <FaUser /> }
    ];

    return (
        <div className="min-h-screen bg-gray-100">
            {/* Navigation Bar */}
            <nav className="bg-white shadow-lg p-3">
                <div className="max-w-6xl mx-auto px-4">
                    <div className="flex justify-between">
                        {/* Logo */}
                        <div className="flex space-x-4">
                            <div className="text-green-600 
                                            font-bold text-2xl">
                                MyStore
                            </div>
                        </div>
                        {/* Links */}
                        <div className="hidden md:flex
                                        items-center space-x-8">
                            {links.map((link, index) => (
                                <a
                                    key={index}
                                    href={`#${link.name}`}
                                    onClick={() => setActiveLink(link.name)}
                                    className={`text-lg flex items-center 
                                                space-x-2 hover:text-green-500 
                                                transition duration-300 ${activeLink === link.name ? 
                                                'text-green-600' : 'text-gray-800'}`}
                                >
                                    {link.icon}
                                    <span>{link.name}</span>
                                </a>
                            ))}
                        </div>
                    </div>
                </div>
            </nav>

            {/* Mobile Navigation */}
            <nav className="md:hidden bg-white shadow-lg">
                <div className="flex justify-around py-4">
                    {links.map((link, index) => (
                        <a
                            key={index}
                            href={`#${link.name}`}
                            onClick={() => setActiveLink(link.name)}
                            className={`flex flex-col 
                                items-center ${activeLink === link.name ? 
                                'text-green-600' : 'text-gray-800'}`}
                        >
                            {link.icon}
                            <span className="text-sm">{link.name}</span>
                        </a>
                    ))}
                </div>
            </nav>

            {/* Main Content */}
            <div className="max-w-6xl mx-auto px-4 mt-8">
                <h1 className="text-3xl font-bold text-gray-800">
                    {activeLink === 'Home' && 'Welcome to the Store'}
                    {activeLink === 'Products' && 'Our Products'}
                    {activeLink === 'Cart' && 'Your Cart'}
                    {activeLink === 'Profile' && 'User Profile'}
                </h1>
                <p className="mt-4 text-gray-600">
                    {activeLink === 'Home' && `Discover a wide range
                                     of products at MyStore.`}
                    {activeLink === 'Products' && `Browse through
                                     various categories of products.`}
                    {activeLink === 'Cart' && `Review and manage
                                     items in your shopping cart.`}
                    {activeLink === 'Profile' && `View and edit
                                     your profile information.`}
                </p>
            </div>
        </div>
    );
}

export default App;

JavaScript

/*tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {
            colors: {
                primaryGreen: "#4CAF50",  // Green
                primaryBlack: "#000000",  // Black
                primaryWhite: "#FFFFFF",  // White
            }
        },
    },
    plugins: [],
}

Step 4: Run the Application

Once Development is completed Now we need run the react js application by using below command. By default the react js application run on port number 3000.

npm start

Output: Once Project is successfully running then open the below URL to test the output.

http://localhost:3000/

Conclusion

Here we created a clean and modern store navigation system using React and Tailwind CSS and React Icons. The responsive design and smooth hover transitions make the user interface more accessible and pleasant across various devices. This setup is easy to extend with additional features like dropdowns or a shopping cart badge.