1

Gooey Dropdown

A dropdown menu with a gooey SVG filter effect that morphs a trigger pill into the panel using spring physics and CSS shape interpolation.

Dependencies

motion

Interaction Type

Hover trigger for micro-clicks; click to toggle the gooey menu with tactile click audio. Hover items to navigate.

Props

Options you can pass to customize this component.

Prop
Type
Description
trigger
string

Text label for the trigger button.

items
DropdownItem[]

Array of menu items with label and optional onClick.

width
number

Width of the dropdown in pixels (default: 240).

align
"start" | "end"

Horizontal alignment of the trigger button.

gap
number

Vertical gap between trigger and panel (default: 18).

itemHeight
number

Height of each menu item (default: 40).

buttonRadius
number

Border radius of the trigger button (default: 12).

panelRadius
number

Border radius of the expanded panel (default: 20).

fill
string

Background fill color for the goo blob.

gooStrength
number

Strength of the SVG goo blur filter (default: 8).

spring
SpringConfig

Spring configuration for the open/close animation.

className
string

Extra classes merged onto the root container.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/goo-dropdown.json

How to use

import { GooDropdown } from "@/components/ui/goo-dropdown"

export function Demo() {
  return (
    <GooDropdown
      trigger="Share"
      items={[
        { label: "Copy link", onClick: () => {} },
        { label: "Share on X", onClick: () => {} },
        { label: "Embed", onClick: () => {} },
      ]}
    />
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Credits

Inspired by aave.com/design

Keep in mind

All components here are original implementations, built from scratch with no copied code, assets, or content. We study UI/UX patterns we admire and craft our own versions, often with added features. If your work inspired something here and isn't credited, or a credit is incomplete, please open an issue - we'll fix it promptly.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/goo-dropdown.json