Hamburger Menu with React and Tailwind

It's always useful to have a hamburger menu in your web application. It's a common pattern to hide the navigation links in a hamburger menu on mobile devices. In this article, we'll see how to create a hamburger menu with React and Tailwind CSS.

import { useState } from "react";

interface HamburgerMenuButtonProps {
  onClick?: ((opened: boolean) => void) | ((opened: boolean) => Promise<void>);
}

export default function HamburgerMenuButton(props: HamburgerMenuButtonProps) {
  const [opened, setOpened] = useState(false);
  // If you want it be closed on page navigation with react-router-dom, add this effect
  // const location = useLocation();
  // React.useEffect(() => setOpened(false), [location]);
  return (
    <button
      onClick={handleClick}
      className={`w-12 hover:gap-2 ${
        opened ? "gap-2" : "gap-1"
      } transition-all items-center flex flex-col overflow-hidden focus:outline-none`}
      aria-expanded="false"
    >
      <span
        className={`block transition-all h-[2px] ${
          opened ? "rotate-45 ml-2" : ""
        } origin-left w-[28px] bg-white`}
      />
      <span
        className={`block ${
          opened ? "opacity-0" : ""
        } transition-all h-[2px] origin-left w-[28px] bg-white`}
      />
      <span
        className={`block transition-all h-[2px] ${
          opened ? "-rotate-45 ml-2" : ""
        } origin-left w-[28px] bg-white`}
      />
    </button>
  );

  function handleClick() {
    setOpened((previouslyOpened) => {
      if (props.onClick) {
        props.onClick(!previouslyOpened);
      }
      return !previouslyOpened;
    });
  }
}

In the above code, we have a HamburgerMenuButton component that toggles the hamburger menu when clicked. The opened state is used to determine whether the menu is opened or not. The handleClick function toggles the opened state and calls the onClick function if it's provided.

You can see the working example here: Hamburger Menu with React and Tailwind