Responsive React Tailwind Navbar Components - CTA, Dark, and Semi-Dark 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 three unique navbar components designed with React and Tailwind CSS, helping you choose the right one for your next project.

React Tailwind Navbar Component With Call-to-Action Button (Variant 1)

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

Call to Action Navbar Desktop UI

Call to Action Navbar Mobile UI

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

Tailwind Call to Action 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

Tailwind Dark Navbar React Component (Variant 2)

I designed this Tailwind Dark Navbar specifically for Next.js developer portfolio templates. It allows you to launch SEO-optimized portfolio in just a few hours. This dark mode navbar is perfect for portfolios, agency websites, and SaaS landing pages.

Key Features:

• The navbar features a smooth fade-in and fade-up animation from top to bottom, and covers the full width and height of the screen.
• Engaging hover effects with transition.

Dark Navbar Desktop UI

The desktop version of the navbar offers a clean, modern design that enhances user experience with minimal distraction.

Dark Navbar Mobile UI

For smaller screens, the navbar includes a hamburger menu that animates with a fade-in and fade-up effect when clicked, ensuring a smooth and engaging user experience.

Tailwind Dark Navbar Component Code

Here is the code for the React tailwind dark navbar component:

Copy
1import { Menu, X } from 'lucide-react'
2import { useState } from 'react'
3
4const navItems = [
5  {
6    label: '_home',
7    href: '#',
8  },
9  {
10    label: '_projects',
11    href: '#projects',
12  },
13  {
14    label: '_services',
15    href: '#services',
16  },
17  {
18    label: '_contact-me',
19    href: '#contact',
20  },
21]
22
23const Navbar = () => {
24  const [isVisible, setIsVisible] = useState(false)
25
26  const toggleMenu = () => {
27    setIsVisible(!isVisible)
28  }
29
30  return (
31    <nav className="h-16 w-full overflow-hidden border-b border-[#2B3E6E] bg-[#011627]">
32      <div className="mx-auto flex h-full w-full max-w-[1200px] items-center justify-between px-4 py-1">
33        {isVisible ? (
34          <span className="text-[#607b96] md:hidden">_menu</span>
35        ) : (
36          <div className="animate-fade-up relative flex items-center gap-3 transition-all duration-300 md:static">
37            {/* logo */}
38            <a
39              href="https://www.codevertiser.com/"
40              className="flex items-center gap-3"
41            >
42              <img
43                src="https://res.cloudinary.com/dyvkdwzcj/image/upload/v1709055594/logo-1_vo1dni.png"
44                className="h-8"
45                alt="Logo"
46              />
47            </a>
48            <span className="text-[#607b96]">john_doe</span>
49          </div>
50        )}
51
52        <div className="md:hidden">
53          <button onClick={toggleMenu}>
54            {isVisible ? (
55              <X className="text-[#607b96] hover:text-white" />
56            ) : (
57              <Menu className="text-[#607b96] hover:text-white" />
58            )}
59          </button>
60        </div>
61
62        <ul
63          className={`${isVisible ? 'flex' : 'hidden'} animate-fade-in absolute left-0 top-16 z-10 h-screen w-full flex-col bg-[#011627] md:static md:top-0 md:flex md:h-full md:w-[72%] md:flex-row lg:w-[65%]`}
64        >
65          {navItems.map((item) => (
66            <li
67              key={item.href}
68              className="flex items-center border-b border-[#2B3E6E] px-4 text-2xl md:border-y-0 md:border-e md:px-8 md:text-base md:first:border-s md:last:ml-auto md:last:border-none md:last:px-0"
69            >
70              <a
71                href={item.href}
72                className="w-full py-7 text-[#607b96] transition-all duration-150 hover:text-white md:py-0"
73              >
74                {item.label}
75              </a>
76            </li>
77          ))}
78        </ul>
79      </div>
80    </nav>
81  )
82}
83
84export default Navbar

Since we use CSS animations with the @keyframes property when opening the navigation menu on smaller screens, don't forget to add this animation in tailwind.config.ts file.

tailwind.config.ts file

Copy
1/** @type {import('tailwindcss').Config} */
2export default {
3  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4  theme: {
5    extend: {
6      animation: {
7        'fade-in': 'fade-in 0.5s ease-out 1',
8        blink: 'blink 0.8s ease-in-out infinite',
9        'fade-up': 'fade-up 0.3s ease-out 1',
10      },
11      keyframes: {
12        'fade-in': {
13          '0%': { opacity: '0' },
14          '100%': { opacity: '1' },
15        },
16        blink: {
17          '0%': { opacity: '0' },
18          '50%': { opacity: '1' },
19          '100%': { opacity: '0' },
20        },
21        'fade-up': {
22          '0%': { top: '5px' },
23          '100%': { top: '0px' },
24        },
25      },
26    },
27  },
28  plugins: [],
29}

Semi Dark Tailwind Navbar Component (Variant 3)

Key Features:

• Navbar smoothly slides in from the right side, covering the full height of the screen.
• Engaging hover effects with sleek animations.
• Features a beautiful, semi-dark green color scheme for a modern, stylish design.

Ideal Use Cases:

This navbar is ideal for web applications that:

• Require a sliding navbar effect from the right side of the screen.
• Do not need a prominent Call-to-Action (CTA) button.

Semi Dark Navbar Desktop UI

The desktop view showcases a semi-dark green aesthetic, creating a polished and professional look.

On mobile screens, the navigation slides in from the right when the hamburger menu is clicked, providing a smooth and engaging user experience.

Semi Dark Navbar Mobile UI

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

Semi Dark 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="relative h-16 bg-[#0B2715] 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-[#0B2715] 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.