Gooey Menu

Gooey Menu is a menu that expands and contracts with a gooey effect.

Preview

Installation

Copy and paste the following code into your project.

Source code not found

Update the import paths to match your project setup.

Usage

<GooeyMenu>
  {" "}
  <GooeyMenuBefore>
    {" "}
    <FaLinkedin /> <FaInstagram />{" "}
  </GooeyMenuBefore>{" "}
  <GooeyMenuTrigger>
    {" "}
    <FaShare />{" "}
  </GooeyMenuTrigger>{" "}
  <GooeyMenuAfter>
    {" "}
    <FaFacebook /> <FaTwitter />{" "}
  </GooeyMenuAfter>
</GooeyMenu>;

Props

Direction

direction can be vertical or horizontal and it will decide the direction of the menu. default is horizontal.

make sure to add id to GooeyTrigger if you are using multiple GooeyMenu in the same page.