React Tailwind Responsive Navbar Components [2 Variants]

The navbar is one of the most important UI elements of any web application, as it is often the first component a user sees. Therefore, it must be carefully designed and coded, with special attention to responsiveness to ensure it looks good on all screen sizes.

The structure of a navbar depends on the website's purpose. For example, a navbar designed for an agency or portfolio site will differ from one created for an e-commerce platform or a blogging application.

This article explores two unique navbar components designed with React and Tailwind CSS, helping you choose the right one for your project.

Navbar Component Variant 1: With Call-to-Action Button

This navbar component includes three fundamental elements:

1. Logo
2. Navigation Links
3. Call-to-Action (CTA) Button

Key Features:

• Simple and minimalistic design
• Smooth transitions for mobile view, with a sliding effect that appears from the top
• Prominent call-to-action button

Ideal Use Cases:

This navbar UI can be used in various web applications but is especially suited for the following:

1. Applications where a CTA button is essential, such as a "Hire Me" or "Contact Me" button in a portfolio, or a "Login" or "Try for Free" button on a SaaS landing page.
2. Websites where you prefer the navbar to slide down from the top on smaller screens.

Suitable Applications:

• Agency Sites
• Developer Portfolios
• Directory Sites
• SaaS Landing Pages

Variant 1 Navbar desktop UI

Variant 1 Navbar Mobile UI

On smaller screens, we animate the navigation elements by moving them from the top when the hamburger menu is clicked.

Varaint 1 Tailwind Navbar Component Code

import { CircleFadingPlus, MenuIcon, XIcon } from 'lucide-react'
import { useState } from 'react'

const navLinks = [
  { title: 'Tools', link: '#' },
  { title: 'Blog', link: '#' },
  { title: 'Contact', link: '#' },
  { title: 'About', link: '#' },
]

const Navbar = () => {
  const [showNav, setShowNav] = useState(false)

  const handleShowNav = () => {
    setShowNav(!showNav)
  }

  return (
    <nav className="relative z-20 bg-white">
      <div className="mx-auto flex max-w-7xl items-center justify-between bg-white px-2 py-2 sm:px-6 lg:px-8">
        <div className="flex items-center gap-4 sm:gap-10">
          {/* hamburger menu or cross icon */}
          <button
            onClick={handleShowNav}
            aria-label="Toggle Menu"
            className="md:hidden"
          >
            {showNav ? (
              <XIcon color="#202020" strokeWidth={3} size={25} />
            ) : (
              <MenuIcon color="#202020" strokeWidth={3} size={25} />
            )}
          </button>
          {/* logo */}
          <a
            href="https://www.codevertiser.com/"
            className="flex items-center gap-3"
          >
            <img
              src="https://res.cloudinary.com/dyvkdwzcj/image/upload/v1709055594/logo-1_vo1dni.png"
              className="h-8"
              alt="Logo"
            />
            <span className="self-center whitespace-nowrap text-xl font-semibold text-stone-900 md:text-2xl">
              BestTech
            </span>
          </a>
          {/* nav links */}
          <div
            className={`absolute left-0 right-0 -z-10 flex w-full flex-col gap-3 bg-white p-3 shadow transition-all duration-300 ease-in-out md:relative md:left-0 md:right-auto md:top-auto md:z-auto md:flex-row md:shadow-none ${showNav ? 'top-[54px]' : 'top-[-165px]'}`}
          >
            {navLinks.map(({ title, link }, index) => (
              <a
                key={index}
                href={link}
                className="rounded-md px-3 py-2 text-slate-500 transition-colors duration-100 ease-linear hover:bg-gray-700 hover:text-white"
              >
                {title}
              </a>
            ))}
          </div>
        </div>
        {/* CTA button */}
        <div>
          <button
            type="button"
            className="flex items-center gap-2 rounded-lg border bg-amber-500 px-3.5 py-1.5 text-base font-semibold text-white transition duration-300 ease-in-out hover:bg-amber-600 active:scale-95 sm:px-5 sm:py-2"
          >
            <CircleFadingPlus size={18} />
            <span>Submit</span>
          </button>
        </div>
      </div>
    </nav>
  )
}

export default Navbar
Copy

Navbar Component Variant 2: Sliding from the Right Side

Key Features:

• Navbar slides in from the right side and covers the full height of the screen.
• Engaging hover effects with animation.

Ideal Use Cases:

This navbar is perfect for web applications where:

You prefer the navbar to slide in from the right side of the screen. A CTA button is not required.

Variant 2 Navbar desktop UI

Variant 2 Navbar Mobile UI

On smaller screens, the navigation elements animate by sliding in from the right when the hamburger menu is clicked.

Variant 2 Tailwind Navbar Component Code

import { Menu, X } from 'lucide-react'
import { useState } from 'react'

const navLinks = [
  { title: 'Tools', link: '#' },
  { title: 'Blog', link: '#' },
  { title: 'Contact', link: '#' },
  { title: 'About', link: '#' },
]

const Navbar = () => {
  const [showNavbar, setShowNavbar] = useState(false)

  const handleShowNavbar = () => {
    setShowNavbar(!showNavbar)
  }

  return (
    <nav className="navbar relative h-16 bg-gradient-to-r from-gray-700 via-gray-600 to-gray-500 shadow-lg">
      <div className="mx-auto flex h-full max-w-7xl items-center justify-between px-4">
        {/* logo */}
        <a
          href="https://www.codevertiser.com/"
          className="flex items-center gap-3"
        >
          <img
            src="https://res.cloudinary.com/dyvkdwzcj/image/upload/v1709055594/logo-1_vo1dni.png"
            className="h-8"
            alt="Logo"
          />
          <span className="self-center whitespace-nowrap text-xl font-bold text-white md:text-2xl">
            CodEazy
          </span>
        </a>
        <button className="menu-icon z-50 md:hidden" onClick={handleShowNavbar}>
          {showNavbar ? (
            <X size={28} className="text-white" />
          ) : (
            <Menu size={28} className="text-white" />
          )}
        </button>
        <div
          className={`nav-elements fixed right-0 top-0 z-40 h-screen w-64 transform bg-gray-600 text-white transition-transform duration-300 ease-in-out md:relative md:right-auto md:top-auto md:h-auto md:w-auto md:translate-x-0 md:bg-transparent ${
            showNavbar ? 'translate-x-0' : 'translate-x-full'
          }`}
        >
          <ul className="mt-16 flex flex-col space-y-8 px-6 py-6 md:mt-0 md:flex-row md:space-x-8 md:space-y-0 md:px-0">
            {navLinks.map(({ title, link }, index) => (
              <li key={index} className="group">
                <a
                  href={link}
                  className="relative p-2 text-lg font-medium text-white transition-all duration-300 ease-in-out hover:text-blue-400 md:text-base"
                >
                  {title}
                  <span className="absolute bottom-0 left-0 h-[2px] w-0 bg-blue-400 transition-all duration-300 ease-in-out group-hover:w-full"></span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </nav>
  )
}

export default Navbar
Copy

Dependecies

For icons, I used the Lucide React npm module. However, feel free to use your preferred icon library if desired.

To learn how to build this responsive navbar component step by step in React, read the How to build Responsive Navbar in React tutorial.

Feel free to utilize and customize this navbar code snippet as per your preferences and business needs.