Build Responsive Navbar with Tailwind CSS and React Icons
Tags: react, nextjs, tailwindcss, navbar
Published: 2024-01-30 23:00:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eki9i21tv30r3wdom8os.png) 

# **Introduction**

In the dynamic realm of web development, creating an elegant and responsive navigation bar is a fundamental aspect of designing user-friendly interfaces. In this tutorial, we'll dive into the process of constructing a sleek and adaptable navbar using the powerful combination of Tailwind CSS and React Icons. This navbar will not only enhance the visual appeal of your application but will also seamlessly adjust to various screen sizes, providing an optimal user experience.

# **Getting Started**

Before we embark on our navbar creation journey, let's ensure that our project is equipped with the necessary tools. Install Tailwind CSS and React Icons using the following commands:

```plaintext
# Install Tailwind CSS
npm install tailwindcss

# Install React Icons
npm install react-icons
```

# **Building the Navbar Component**

Now, let's delve into the core of our tutorial—the Navbar component.

# **Navbar Component (Navbar.jsx)**

```plaintext
import React, { useState } from 'react';
import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';

const Navbar = () => {
  // State to manage the navbar's visibility
  const [nav, setNav] = useState(false);

  // Toggle function to handle the navbar's display
  const handleNav = () => {
    setNav(!nav);
  };

  // Array containing navigation items
  const navItems = [
    { id: 1, text: 'Home' },
    { id: 2, text: 'Company' },
    { id: 3, text: 'Resources' },
    { id: 4, text: 'About' },
    { id: 5, text: 'Contact' },
  ];

  return (
    <div className='bg-black flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-white'>
      {/* Logo */}
      <h1 className='w-full text-3xl font-bold text-[#00df9a]'>REACT.</h1>

      {/* Desktop Navigation */}
      <ul className='hidden md:flex'>
        {navItems.map(item => (
          <li
            key={item.id}
            className='p-4 hover:bg-[#00df9a] rounded-xl m-2 cursor-pointer duration-300 hover:text-black'
          >
            {item.text}
          </li>
        ))}
      </ul>

      {/* Mobile Navigation Icon */}
      <div onClick={handleNav} className='block md:hidden'>
        {nav ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
      </div>

      {/* Mobile Navigation Menu */}
      <ul
        className={
          nav
            ? 'fixed md:hidden left-0 top-0 w-[60%] h-full border-r border-r-gray-900 bg-[#000300] ease-in-out duration-500'
            : 'ease-in-out w-[60%] duration-500 fixed top-0 bottom-0 left-[-100%]'
        }
      >
        {/* Mobile Logo */}
        <h1 className='w-full text-3xl font-bold text-[#00df9a] m-4'>REACT.</h1>

        {/* Mobile Navigation Items */}
        {navItems.map(item => (
          <li
            key={item.id}
            className='p-4 border-b rounded-xl hover:bg-[#00df9a] duration-300 hover:text-black cursor-pointer border-gray-600'
          >
            {item.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Navbar;
```

# **Integrating the Navbar into Your App**

With our Navbar component ready, let's seamlessly integrate it into our main App component.

# **App Component (app.js)**

```plaintext
import React from 'react';
import Navbar from './components/Navbar';

function App() {
  return (
    <div>
      <Navbar />
    </div>
  );
}

export default App;
```

# **Conclusion**

You've just crafted a visually appealing and responsive navbar for your React application. By leveraging the capabilities of Tailwind CSS and React Icons, you've ensured that your navigation bar not only looks great on various devices but also provides a seamless user experience. Feel free to customize the styles and expand the functionality to suit the unique needs of your project. Happy coding!