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

Copy
1import { CircleFadingPlus, MenuIcon, XIcon } from 'lucide-react'
2import { useState } from 'react'
3
4const navLinks = [
5  { title: 'Tools', link: '#' },
6  { title: 'Blog', link: '#' },
7  { title: 'Contact', link: '#' },
8  { title: 'About', link: '#' },
9]
10
11const Navbar = () => {
12  const [showNav, setShowNav] = useState(false)
13
14  const handleShowNav = () => {
15    setShowNav(!showNav)
16  }
17
18  return (
19    <nav className="relative z-20 bg-white">
20      <div className="mx-auto flex max-w-7xl items-center justify-between bg-white px-2 py-2 sm:px-6 lg:px-8">
21        <div className="flex items-center gap-4 sm:gap-10">
22          {/* hamburger menu or cross icon */}
23          <button
24            onClick={handleShowNav}
25            aria-label="Toggle Menu"
26            className="md:hidden"
27          >
28            {showNav ? (
29              <XIcon color="#202020" strokeWidth={3} size={25} />
30            ) : (
31              <MenuIcon color="#202020" strokeWidth={3} size={25} />
32            )}
33          </button>
34          {/* logo */}
35          <a
36            href="https://www.codevertiser.com/"
37            className="flex items-center gap-3"
38          >
39            <img
40              src="https://res.cloudinary.com/dyvkdwzcj/image/upload/v1709055594/logo-1_vo1dni.png"
41              className="h-8"
42              alt="Logo"
43            />
44            <span className="self-center whitespace-nowrap text-xl font-semibold text-stone-900 md:text-2xl">
45              BestTech
46            </span>
47          </a>
48          {/* nav links */}
49          <div
50            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]'}`}
51          >
52            {navLinks.map(({ title, link }, index) => (
53              <a
54                key={index}
55                href={link}
56                className="rounded-md px-3 py-2 text-slate-500 transition-colors duration-100 ease-linear hover:bg-gray-700 hover:text-white"
57              >
58                {title}
59              </a>
60            ))}
61          </div>
62        </div>
63        {/* CTA button */}
64        <div>
65          <button
66            type="button"
67            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"
68          >
69            <CircleFadingPlus size={18} />
70            <span>Submit</span>
71          </button>
72        </div>
73      </div>
74    </nav>
75  )
76}
77
78export default Navbar

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

Copy
1import { Menu, X } from 'lucide-react'
2import { useState } from 'react'
3
4const navLinks = [
5  { title: 'Tools', link: '#' },
6  { title: 'Blog', link: '#' },
7  { title: 'Contact', link: '#' },
8  { title: 'About', link: '#' },
9]
10
11const Navbar = () => {
12  const [showNavbar, setShowNavbar] = useState(false)
13
14  const handleShowNavbar = () => {
15    setShowNavbar(!showNavbar)
16  }
17
18  return (
19    <nav className="navbar relative h-16 bg-gradient-to-r from-gray-700 via-gray-600 to-gray-500 shadow-lg">
20      <div className="mx-auto flex h-full max-w-7xl items-center justify-between px-4">
21        {/* logo */}
22        <a
23          href="https://www.codevertiser.com/"
24          className="flex items-center gap-3"
25        >
26          <img
27            src="https://res.cloudinary.com/dyvkdwzcj/image/upload/v1709055594/logo-1_vo1dni.png"
28            className="h-8"
29            alt="Logo"
30          />
31          <span className="self-center whitespace-nowrap text-xl font-bold text-white md:text-2xl">
32            CodEazy
33          </span>
34        </a>
35        <button className="menu-icon z-50 md:hidden" onClick={handleShowNavbar}>
36          {showNavbar ? (
37            <X size={28} className="text-white" />
38          ) : (
39            <Menu size={28} className="text-white" />
40          )}
41        </button>
42        <div
43          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 ${
44            showNavbar ? 'translate-x-0' : 'translate-x-full'
45          }`}
46        >
47          <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">
48            {navLinks.map(({ title, link }, index) => (
49              <li key={index} className="group">
50                <a
51                  href={link}
52                  className="relative p-2 text-lg font-medium text-white transition-all duration-300 ease-in-out hover:text-blue-400 md:text-base"
53                >
54                  {title}
55                  <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>
56                </a>
57              </li>
58            ))}
59          </ul>
60        </div>
61      </div>
62    </nav>
63  )
64}
65
66export default Navbar

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.