1. docs
  2. gesturs
  3. gooey-menu

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.

import React from "react";

interface GooeyFilterProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
}

export default function GooeyFilter({ children, ...props }: GooeyFilterProps) {
  return (
    <div
      {...props}
      style={{
        filter: "url(#goo)",
      }}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        style={{ display: "none" }}
      >
        <defs>
          <filter id="goo">
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation="10"
              result="blur"
            />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -8"
              result="goo"
            />
            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
          </filter>
        </defs>
      </svg>
      {children}
    </div>
  );
}

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.