Dropdown

Popover dropdown component with customizable trigger and content. Closes on click outside or Escape key. Supports programmatic control.

Import

import { Dropdown } from 'vuiii'

Basic Usage

View in Storybook

// Basic dropdown with default button trigger
import { Dropdown, DropdownMenu } from 'vuiii'

<Dropdown label="Options" variant="primary">
  <DropdownMenu :items="menuItems" @itemClick="handleClick" />
</Dropdown>

More Examples

// With custom trigger slot
<Dropdown>
  <template #trigger="{ open, close, toggle, isOpen }">
    <IconButton icon="ellipsis-vertical" @click="toggle()" />
  </template>

  <template #default="{ close }">
    <div class="custom-dropdown-content">
      <button @click="doSomething(); close()">Action</button>
    </div>
  </template>
</Dropdown>

// Programmatic control via ref
const dropdownRef = ref<DropdownRef>()

// Open/close programmatically
dropdownRef.value?.open()
dropdownRef.value?.close()
dropdownRef.value?.toggle()

// Check state
if (dropdownRef.value?.isOpen.value) { ... }

// With dropdown placement control
<Dropdown label="Menu" dropdown-placement="right">
  <DropdownMenu :items="items" />
</Dropdown>

Storybook

For interactive examples with all variants, see Dropdown in Storybook.