Dropdown

Dropdown component based on Headless UI Menu.

Basic Usage

Use <VDropdown /> component to create dropdown and <VDropdownItem /> component to add dropdown item.

View Code

<template>
  <VDropdown>
    <VDropdownItem>Item 1</VDropdownItem>
    <VDropdownItem>Item 2</VDropdownItem>
    <VDropdownItem>Item 3</VDropdownItem>
    <VDropdownItem divider />
    <VDropdownItem>Item 5</VDropdownItem>
    <VDropdownItem>Item 6</VDropdownItem>
  </VDropdown>
</template>

Label

Use label prop to change the default label text.

View Code

<template>
  <VDropdown label="Action">
    <VDropdownItem>Item 1</VDropdownItem>
    <VDropdownItem>Item 2</VDropdownItem>
    <VDropdownItem>Item 3</VDropdownItem>
    <VDropdownItem divider />
    <VDropdownItem>Item 5</VDropdownItem>
    <VDropdownItem>Item 6</VDropdownItem>
  </VDropdown>
</template>

Right Placement

Use right prop to place the dropdown to the right.

View Code

<template>
  <VDropdown right>
    <VDropdownItem>Item 1</VDropdownItem>
    <VDropdownItem>Item 2</VDropdownItem>
    <VDropdownItem>Item 3</VDropdownItem>
    <VDropdownItem divider />
    <VDropdownItem>Item 5</VDropdownItem>
    <VDropdownItem>Item 6</VDropdownItem>
  </VDropdown>
</template>

Icon

Use icon to the <VDropdownItem /> component to add prefix icon.

View Code

<template>
  <VDropdown right label="Action">
    <VDropdownItem icon="ic:edit">
      Edit
    </VDropdownItem>
    <VDropdownItem icon="ic:round-copy-all">
      Copy
    </VDropdownItem>
    <VDropdownItem divider />
    <VDropdownItem icon="ic:round-delete">
      Delete
    </VDropdownItem>
  </VDropdown>
</template>

Custom Activator

Use <VDropdownButton /> component to create custom dropdown activator. You can also render it as another component like Button via as prop.

View Code

<script setup lang="ts">
const VButton = resolveComponent('VButton')
</script>

<template>
  <VDropdown>
    <template #activator>
      <VDropdownButton :as="VButton" color="primary">
        My VDropdown
      </VDropdownButton>
    </template>
    <VDropdownItem>Item 1</VDropdownItem>
    <VDropdownItem>Item 2</VDropdownItem>
    <VDropdownItem>Item 3</VDropdownItem>
    <VDropdownItem divider />
    <VDropdownItem>Item 5</VDropdownItem>
    <VDropdownItem>Item 6</VDropdownItem>
  </VDropdown>
</template>

Props

Prop	Type	Default	Description
modelValue	`boolean`	`false`	The value of the model.
btnProps	`Record<string, any>`	`{ variant: 'secondary' }`	Props for the button component.
label	`string`	`'Options'`	The label for the button component.
right	`boolean`	`false`	Specifies whether to align the dropdown to the right.
items	`VDropdownItemProps[]`	`[]`	An array of items to display in the dropdown.

Slots

activator

The activator slot allows you to customize the activator component that triggers the dropdown. The activator component is typically a button or an icon, and is used to open and close the dropdown.

By using the activator slot, you have complete control over the appearance and behavior of the activator component. You can use any valid Vue component, including custom components, as the activator.

Here's an example of how to use the activator slot:

<template>
  <VDropdown>
    <template #activator>
      <VButton color="primary">
        Custom Activator
      </VButton>
    </template>
  </VDropdown>
</template>

Types

export interface VDropdownProps {
  modelValue: boolean
  btnProps: any
  label: string
  right: boolean
  items?: VDropdownItemProps[]
}

export interface VDropdownItemProps {
  text: string
  to?: string
  href?: string
  icon?: string
  newTab?: boolean
}