Build Responsive Navbar with Tailwind CSS and React Icons

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:

  
  
  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)

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 */}
  &lt;ul className='hidden md:flex'&gt;
    {navItems.map(item =&gt; (
      &lt;li
        key={item.id}
        className='p-4 hover:bg-[#00df9a] rounded-xl m-2 cursor-pointer duration-300 hover:text-black'
      &gt;
        {item.text}
      &lt;/li&gt;
    ))}
  &lt;/ul&gt;

  {/* Mobile Navigation Icon */}
  &lt;div onClick={handleNav} className='block md:hidden'&gt;
    {nav ? &lt;AiOutlineClose size={20} /&gt; : &lt;AiOutlineMenu size={20} /&gt;}
  &lt;/div&gt;

  {/* Mobile Navigation Menu */}
  &lt;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%]'
    }
  &gt;
    {/* Mobile Logo */}
    &lt;h1 className='w-full text-3xl font-bold text-[#00df9a] m-4'&gt;REACT.&lt;/h1&gt;

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



    

    




);

};

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)

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!