DEV Community

An Easy Way to Build a Responsive Navbar using Tailwind & React ⚛

Pranav Birajdar on March 15, 2021

I recently wrote an article about some of my favorite Tailwind component libraries. However, I could never find an ideal navbar for my projects. ...

Read full post

Isaac Pak • Jul 10 '21

Works great, but I get this in the console when I click the menu button: 'Warning: Unexpected ref object provided for div. Use either a ref-setter function or React.createRef().'

Onurhan • Aug 28 '21

did you found any solution? I am too have this problem.

Isaac Pak • Aug 30 '21

not yet

mr sajib • Apr 28 '22

did you found any solution? same probelm

Isaac Pak • Apr 29 '22

project has been abandoned

mr sajib • Apr 30 '22

very sad, but why?

Isaac Pak • Apr 30 '22

new project

Bruno • Mar 7 '22

Did you manage to figure out how to fix this? Or anyone? The menu still seems to work fine but I'm getting this error every time.

Isaac Pak • Mar 7 '22

still the same...

Lucy Wilson • Jul 2 '22

thanks for this! For anyone coming across the ref error mentioned below, replacing the ref with useRef() fixes it.
Delete the {(ref) => ( part of the transition code and its closing brackets, and add const ref=useRef() to the top of your file, importing useRef from react. Leave the ref={ref} in the div and it should then work as it is.

SUBARNAB SADHUKHAN • Apr 22

Hey, It works. Thank you for sharing.

import { useRef, useState } from "react";
import { Transition } from "@headlessui/react";

function Nav() {
  const ref = useRef<HTMLDivElement>(null);
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <nav className="bg-gray-800">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <img
                  className="h-8 w-8"
                  src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
                  alt="Workflow"
                />
              </div>
              <div className="hidden md:block">
                <div className="ml-10 flex items-baseline space-x-4">
                  <a
                    href="#"
                    className=" rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-gray-700"
                  >
                    Dashboard
                  </a>

                  <a
                    href="#"
                    className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
                  >
                    Team
                  </a>

                  <a
                    href="#"
                    className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
                  >
                    Projects
                  </a>

                  <a
                    href="#"
                    className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
                  >
                    Calendar
                  </a>

                  <a
                    href="#"
                    className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
                  >
                    Reports
                  </a>
                </div>
              </div>
            </div>
            <div className="-mr-2 flex md:hidden">
              <button
                onClick={() => setIsOpen(!isOpen)}
                type="button"
                className="inline-flex items-center justify-center rounded-md bg-gray-900 p-2 text-gray-400 hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
                aria-controls="mobile-menu"
                aria-expanded="false"
              >
                <span className="sr-only">Open main menu</span>
                {!isOpen ? (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                ) : (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                )}
              </button>
            </div>
          </div>
        </div>

        <Transition
          show={isOpen}
          enter="transition ease-out duration-100 transform"
          enterFrom="opacity-0 scale-95"
          enterTo="opacity-100 scale-100"
          leave="transition ease-in duration-75 transform"
          leaveFrom="opacity-100 scale-100"
          leaveTo="opacity-0 scale-95"
        >
          <div className="md:hidden" id="mobile-menu">
            <div ref={ref} className="space-y-1 px-2 pb-3 pt-2 sm:px-3">
              <a
                href="#"
                className="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-gray-700"
              >
                Dashboard
              </a>

              <a
                href="#"
                className="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
              >
                Team
              </a>

              <a
                href="#"
                className="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
              >
                Projects
              </a>

              <a
                href="#"
                className="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
              >
                Calendar
              </a>

              <a
                href="#"
                className="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
              >
                Reports
              </a>
            </div>
          </div>
        </Transition>
      </nav>
    </div>
  );
}

export default Nav;

Eklavya • Jul 12 '21

Please suggest me anyway to implement this using NodeJS

ndukachukz • Sep 24 '21

😂😂

Eklavya • Oct 22 '21

What?

Casey 💎 • Nov 9 '21

Hey! They may have thought you were joking, which is okay although it does come off as rude, as NodeJS is used for the backend of an application(a JavaScript runtime environment). You wouldn't implement something like this in NodeJS :)