Responsive Navigation Bar with React js and Tailwind CSS

Building a Responsive Navigation Bar with React js and Tailwind CSS

In today’s web development world, responsive design is crucial for building modern web applications. With React, we can create an interactive and dynamic navigation bar that adjusts based on screen size. In this blog, I’ll walk you through the process of creating a responsive navigation bar that contains links and a call-to-action button.

Let’s break it down:

Youtube Video:

Overview

We’re going to build a navigation bar using React that:

1. Displays menu items.

2. Has a hamburger menu for mobile screens.

3. Contains a "Get Started" button that stands out.

We will create two components:

• Nav: Contains the navigation links and the button.

• Button: A reusable button component that we’ll use in the navigation.

// Nav.jsx

import React, { useState } from 'react'
import Button from './Button';

const Nav = () => {
    let Links =[
      {name:"HOME",link:"/"},
      {name:"SERVICE",link:"/"},
      {name:"ABOUT",link:"/"},
      {name:"BLOG'S",link:"/"},
      {name:"CONTACT",link:"/"},
    ];
    let [open,setOpen]=useState(false);
  return (
    <div className='shadow-md w-full fixed top-0 left-0'>
      <div className='md:flex items-center justify-between bg-white py-4 md:px-10 px-7'>
      <div className='font-bold text-2xl cursor-pointer flex items-center font-[Poppins] 
      text-gray-800'>
        <span className='text-3xl text-indigo-600 mr-1 pt-2'>
        <ion-icon name="logo-ionic"></ion-icon>
        </span>
        Designer
      </div>
      
      <div onClick={()=>setOpen(!open)} className='text-3xl absolute right-8 top-6 cursor-pointer md:hidden'>
      <ion-icon name={open ? 'close':'menu'}></ion-icon>
      </div>

      <ul className={`md:flex md:items-center md:pb-0 pb-12 absolute md:static bg-white md:z-auto z-[-1] left-0 w-full md:w-auto md:pl-0 pl-9 transition-all duration-500 ease-in ${open ? 'top-20 ':'top-[-490px]'}`}>
        {
          Links.map((link)=>(
            <li key={link.name} className='md:ml-8 text-xl md:my-0 my-7'>
              <a href={link.link} className='text-gray-800 hover:text-gray-400 duration-500'>{link.name}</a>
            </li>
          ))
        }
        <Button>
          Get Started
        </Button>
      </ul>
      </div>
    </div>
  )
}

export default Nav

Explanation of the Nav Component:

• State Management (useState): We use React's useState to toggle the mobile menu visibility.

• Responsive Design: We’re using Tailwind CSS classes for layout and styling. On larger screens (md:), the menu is horizontally aligned, but on smaller screens, a hamburger menu (ion-icon) is shown.

• Links Mapping: We loop through the Links array to render menu items dynamically.

• Button: The "Get Started" button is a reusable component (described next) and is placed in the menu.

Step 2: Creating the Button Component

// Button.jsx

import React from 'react'

const Button = (props) => {
  return (
    <button className='bg-indigo-600 text-white font-[Poppins] py-2 px-6 rounded md:ml-8 hover:bg-indigo-400 
    duration-500'>
      {props.children}
    </button>
  )
}

export default Button

Explanation of the Button Component:

The Button component is simple yet effective. It:

• Accepts children as a prop, which allows you to pass the button text or content from the parent (in this case, the Nav component).

• Has styling for background color, hover effects, and padding using Tailwind CSS.

• Uses rounded corners to give it a smooth, modern look.

Step 3: Responsive Layout and Styling with Tailwind CSS

In this example, Tailwind CSS is used for styling:

• md: prefix applies styles for medium and larger screens.

• absolute, left-0, top-20: These classes are used to position the mobile menu when it is open or closed.

• transition-all: This provides a smooth sliding animation when toggling the mobile menu.

Step 4: The Hamburger Menu Functionality

The hamburger menu uses the ion-icon component, which is part of Ionic Icons. We toggle between the menu and close icons based on the state open. Clicking on the hamburger icon changes the state and slides the menu in or out of view on smaller screens.

Step 5: Bringing It All Together

Now that we’ve created both the Nav and Button components, here’s how the whole structure looks when integrated into an application.

You can use the Nav component inside your main layout, such as:

// App.jsx

import React from 'react';
import Nav from './components/Nav'; // Adjust path as needed

function App() {
  return (
    <div className="App">
      <Nav />
      {/* Other components or content goes here */}
    </div>
  );
}

export default App;

Final Thoughts

With this simple setup, we’ve created a clean, responsive navigation bar that adapts to both desktop and mobile screens. The Button component adds functionality to the navigation and can easily be reused throughout your application.

If you want to take this further, you can:

• Add more interactivity to the menu items (like dropdowns).

• Integrate the navigation with routing (e.g., using react-router).

• Customize the design further using Tailwind or other CSS frameworks.

I hope this blog helps you get started with building modern, responsive navigation bars in React. Feel free to modify the code to fit your project’s needs!