@paulovdev/fully-menu

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

🔗 Demo

You can see the demo live at: https://fully-menu.vercel.app/

📦 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:

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

🚀 Basic Usage

Import and use the Hamburger component together with one of the available menu animation components:

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

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;

🎨 Props

Hamburger Component Props

| Prop | Type | Default | Description | | ----------- | -------- | --------- | ---------------------------------- | | isOpen | boolean | — | Whether the hamburger menu is open | | toggle | function | — | Function to toggle menu open state | | color | string | #010101 | Color of the bars when closed | | openColor | string | #ffffff | Color of the bars when open | | spacing | number | 6 | Vertical spacing between bars | | width | number | 32 | Width of each bar | | height | number | 2 | Height of each bar | | index | number | 100 | z-index of the hamburger button |

Menu Animation Components Props

The menu components (MenuSlideAnimations, MenuStairsAnimations, MenuCircleAnimation) accept the following props:

| Prop Name | Type | Default | Description | | ------------ | ------- | ------------ | --------------------------------- | | isOpen | boolean | required | Controls whether menu is open | | background | string | #000000 | Background color of the menu | | width | string | 100vw | Width of the menu container | | height | string | 100vh | Height of the menu container | | padding | string | 10px | Padding inside the menu container | | margin | string | 0px 0px | Margin around the menu container | | index | number | 90 | z-index for layering the menu |

Slide Menu Props (MenuSlideAnimations)

| Prop Name | Type | Default | Description | | ------------------- | ------ | ------------- | ----------------------------------------------------------------- | | style | string | "SlideDown" | Slide animation style (SlideDown, SlideUp, SlideLeft, SlideRight) | | durationInitial | number | 0.75 | Duration for initial animation (menu entering) | | durationOnAnimate | number | 0.75 | Duration for animation when menu fully visible | | durationOnExit | number | 0.75 | Duration for exit animation (menu closing) |

Stairs Menu Props (MenuStairsAnimations)

| Prop Name | Type | Default | Description | | ------------------- | ------ | ------------ | --------------------------------------------- | | style | string | "StairsUp" | Stairs animation style (StairsUp, StairsDown) | | stairsCount | number | 6 | Number of stairs/steps to render | | durationInitial | number | 0.75 | Duration for initial animation | | durationOnAnimate | number | 0.75 | Duration when menu fully visible | | durationOnExit | number | 0.75 | Duration for exit animation | | delayInitial | number | 0.05 | Delay between animation steps on enter | | delayOnAnimate | number | 0.05 | Delay between animation steps when visible | | delayOnExit | number | 0.05 | Delay between animation steps on exit |

Circle Menu Props (MenuCircleAnimation)

| Prop Name | Type | Default | Description | | ------------------- | ------ | ------- | -------------------------------- | | durationInitial | number | 0.75 | Duration for initial animation | | durationOnAnimate | number | 0.75 | Duration when menu fully visible | | durationOnExit | number | 0.75 | Duration for exit animation |

⚖️ License

MIT