# Gooey Dropdown

> A pill trigger whose menu items stretch out of it with a gooey metaball merge before snapping into discrete buttons.

<demo-gooey-dropdown>



</demo-gooey-dropdown>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/gooey-dropdown.json"
```

## Usage

```vue
<script setup lang="ts">
  import GooeyDropdown from '~/components/ui/gooey-dropdown/GooeyDropdown.vue';
  import type { GooeyDropdownItem } from '~/components/ui/gooey-dropdown/types';

  const items: GooeyDropdownItem[] = [
    { label: 'Copy link', icon: 'lucide:link' },
    { label: 'Twitter', icon: 'lucide:twitter' },
    { label: 'Email', icon: 'lucide:mail' },
  ];
</script>

<template>
  <GooeyDropdown label="Share" :items="items" />
</template>
```

Clicking the trigger unfurls the items, which appear to stretch out of the pill
with a gooey metaball merge (an SVG blur + contrast filter fuses the blobs) and
snap into discrete buttons. Set `:direction="'up'"` to unfurl upward. Each pick
emits `select`.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Share'
      </code>
    </td>
    
    <td>
      Trigger label
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'lucide:share-2'
      </code>
    </td>
    
    <td>
      Optional <code>
        @nuxt/icon
      </code>
      
       name for the trigger
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        GooeyDropdownItem[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Menu items (<code>
        label
      </code>
      
      , optional <code>
        icon
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        direction
      </code>
    </td>
    
    <td>
      <code>
        'up' | 'down'
      </code>
    </td>
    
    <td>
      <code>
        'down'
      </code>
    </td>
    
    <td>
      Direction the items unfurl
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gap
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        52
      </code>
    </td>
    
    <td>
      Distance between blobs in px (smaller = more merge)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stiffness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        420
      </code>
    </td>
    
    <td>
      Spring stiffness for the unfurl
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        damping
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        32
      </code>
    </td>
    
    <td>
      Spring damping for the unfurl
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        select
      </code>
    </td>
    
    <td>
      <code>
        { label: string, index: number }
      </code>
    </td>
    
    <td>
      Fired when an item is chosen
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        update:open
      </code>
    </td>
    
    <td>
      <code>
        open: boolean
      </code>
    </td>
    
    <td>
      Fired when the menu opens/closes
    </td>
  </tr>
</tbody>
</table>

## Credits

Inspired by the gooey dropdown interaction by [@nexvyn](https://x.com/nexvyn).