@paulovdev/menu-component

Animated menu with a hamburger toggle button — built with ReactJS, NextJS, Framer Motion & Tailwind.

Demo:

Installation:

To use this package, make sure your project has Tailwind CSS installed and properly configured, as the components rely on Tailwind utility classes for styling.

Use your favorite package manager to install@paulovdev/menu-componentpackage:

npm install @paulovdev/menu-component
# or
yarn add @paulovdev/menu-component

Basic usage:

import React, { useState } from "react";
import {
  Hamburger,
  MenuStairsAnimations
} from "@paulovdev/menu-component";

const Example = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleMenu = () => setIsOpen((prev) => !prev);

  return (
    <nav className="fixed top-0 left-0 p-5 w-full h-[50px] flex justify-start items-center bg-gray-100">
      <Hamburger
        isOpen={isOpen}
        toggleMenu={toggleMenu}
        color="black"
        openColor="white"
        spacing={6}
        width={38}
        height={2}
      />
      <MenuStairsAnimations isOpen={isOpen} padding="10px">
        <div className="relative size-full flex flex-col items-center justify-center">
          <h1 className="text-white-100 text-[1.75rem] font-semibold  mb-8 ">
            Menu
          </h1>
          <ul className="flex flex-col gap-4">
            <li className="text-[.9rem] text-white-100 font-semibold cursor-pointer hover:text-gray-400 transition" onClick={toggleMenu}>
              Home
            </li>
            <li className="text-[.9rem] text-white-100 font-semibold cursor-pointer hover:text-gray-400 transition" onClick={toggleMenu}>
              About
            </li>
          </ul>
        </div>
      </MenuStairsAnimations>
    </nav>
  );
};

export default Example;