Rappel-UI

The Dropdown component consists of a trigger and a floating dropdown menu panel. Clicking or hovering over the trigger reveals the menu panel, which typically contains a set of action options. Common use‑cases include button dropdowns, navigation menus, table header dropdowns, "more‑actions" menus and multi‑level sub‑menus. Built on top of Tooltip.

Basic Usage

There are two ways to use Dropdown: Use options prop to render Dropdown menu items, or use slot#menu to customize menu with <re-dropdown-menu> and <re-dropdown-item>.

vue

<template>
  <re-dropdown :options="options" @select="select">
    <re-button>
      Dropdown Options List
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
  <re-dropdown @select="select">
    <re-button>
      Dropdown Items List
      <arrow-downward class="ml-5px" />
    </re-button>
    <template #menu>
      <re-dropdown-menu>
        <re-dropdown-item value="item1" label="item-1"></re-dropdown-item>
        <re-dropdown-item value="item2">Item 2</re-dropdown-item>
        <re-dropdown-item value="item3">Item 3</re-dropdown-item>
      </re-dropdown-menu>
    </template>
  </re-dropdown>
</template>
<script lang="ts" setup>
import {
  ReDropdown,
  ReDropdownMenu,
  ReDropdownItem,
  ReButton,
  ReMessage,
  ArrowDownward
} from 'rappel-ui'

const options = [
  { label: 'option1', value: 'option1' },
  { label: 'option2', value: 'option2' },
  { label: 'option3', value: 'option3' }
]

const select = (value: string) => {
  ReMessage.success(`You selected ${value}`)
}
</script>

Placement

vue

<template>
  <div class="max-w-600px mx-auto">
    <div class="flex justify-center">
      <re-dropdown placement="top-start" :options @select="select">
        <re-button>top-start</re-button>
      </re-dropdown>
      <re-dropdown placement="top" :options @select="select">
        <re-button>top</re-button>
      </re-dropdown>
      <re-dropdown placement="top-end" :options @select="select">
        <re-button>top-end</re-button>
      </re-dropdown>
    </div>
    <div class="flex justify-between">
      <div class="flex flex-col items-start">
        <re-dropdown placement="left-start" :options @select="select">
          <re-button>left-start</re-button>
        </re-dropdown>
        <re-dropdown placement="left" :options @select="select">
          <re-button class="mt-1em ml-0!">left</re-button>
        </re-dropdown>
        <re-dropdown placement="left-end" :options @select="select">
          <re-button class="mt-1em ml-0!">left-end</re-button>
        </re-dropdown>
      </div>
      <div class="flex flex-col items-end">
        <re-dropdown placement="right-start" :options @select="select">
          <re-button>right-start</re-button>
        </re-dropdown>
        <re-dropdown placement="right" :options @select="select">
          <re-button class="mt-1em ml-0!">right</re-button>
        </re-dropdown>
        <re-dropdown placement="right-end" :options @select="select">
          <re-button class="mt-1em ml-0!">right-end</re-button>
        </re-dropdown>
      </div>
    </div>
    <div class="flex justify-center">
      <re-dropdown placement="bottom-start" :options @select="select">
        <re-button>bottom-start</re-button>
      </re-dropdown>
      <re-dropdown placement="bottom" :options @select="select">
        <re-button>bottom</re-button>
      </re-dropdown>
      <re-dropdown placement="bottom-end" :options @select="select">
        <re-button>bottom-end</re-button>
      </re-dropdown>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ReDropdown, ReButton, ReMessage } from 'rappel-ui'

const options = [
  { label: 'option1', value: 'option1' },
  { label: 'option2', value: 'option2' },
  { label: 'option3', value: 'option3' }
]

const select = (value: string) => {
  ReMessage.success(`You selected ${value}`)
}
</script>

Trigger

Use hover 、 click 、 focus and contextmenu to display Dropdown menu by trigger attribute.

vue

<template>
  <re-dropdown :options="options" trigger="hover" @select="select">
    <re-button>
      Hover me
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
  <re-dropdown :options="options" trigger="click" @select="select">
    <re-button>
      Click me
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
  <re-dropdown :options="options" trigger="focus" @select="select">
    <re-button>
      Focus me
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
  <re-dropdown :options="options" trigger="contextmenu" @select="select">
    <re-button>
      Contextmenu
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
</template>
<script lang="ts" setup>
import { ReDropdown, ReButton, ReMessage, ArrowDownward } from 'rappel-ui'

const options = [
  { label: 'option1', value: 'option1' },
  { label: 'option2', value: 'option2' },
  { label: 'option3', value: 'option3' }
]

const select = (value: string) => {
  ReMessage.success(`You selected ${value}`)
}
</script>

Tree

When you need a tree dropdown menu, options should be a tree-shaped array. You can also build a tree menu manually using <re-dropdown-menu>、<re-dropdown-submenu> and <re-dropdown-item> components.

vue

<template>
  <re-dropdown :options="options" @select="select">
    <re-button>
      Dropdown Options List
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
  <re-dropdown @select="select">
    <re-button>
      Dropdown Items List
      <arrow-downward class="ml-5px" />
    </re-button>
    <template #menu>
      <re-dropdown-menu>
        <re-dropdown-item value="Item 1" label="Item 1"></re-dropdown-item>
        <re-dropdown-item value="Item 2">Item 2</re-dropdown-item>
        <re-dropdown-submenu>
          <template #label>Item 3</template>
          <re-dropdown-item value="Item 3-1">Item 3-1</re-dropdown-item>
          <re-dropdown-item value="Item 3-2">Item 3-2</re-dropdown-item>
          <re-dropdown-submenu>
            <template #label>Item 3-3</template>
            <re-dropdown-item value="Item 3-3-1">Item 3-3-1</re-dropdown-item>
            <re-dropdown-item value="Item 3-3-2">Item 3-3-2</re-dropdown-item>
          </re-dropdown-submenu>
        </re-dropdown-submenu>
      </re-dropdown-menu>
    </template>
  </re-dropdown>
</template>
<script lang="ts" setup>
import {
  ReDropdown,
  ReDropdownMenu,
  ReDropdownSubmenu,
  ReDropdownItem,
  ReButton,
  ReMessage,
  ArrowDownward
} from 'rappel-ui'

const options = [
  {
    label: 'option1',
    value: 'option1',
    children: [
      {
        label: 'option1-1',
        value: 'option1-1'
      },
      {
        label: 'option1-2',
        value: 'option1-2',
        children: [{ label: 'option1-2-1', value: 'option1-2-1' }]
      }
    ]
  },
  { label: 'option2', value: 'option2' },
  { label: 'option3', value: 'option3' }
]

const select = (value: string) => {
  ReMessage.success(`You selected ${value}`)
}
</script>

Disabled

The disabled attribute specifies whether the dropdown menu is disabled, disabled the Dropdown or the Dropdown menu items.

vue

<template>
  <re-dropdown :options="options" @select="select">
    <re-button>
      Disabled Dropdown Option
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
  <re-dropdown @select="select">
    <re-button>
      Disabled Dropdown Item
      <arrow-downward class="ml-5px" />
    </re-button>
    <template #menu>
      <re-dropdown-menu>
        <re-dropdown-item value="item1">Item 1</re-dropdown-item>
        <re-dropdown-item value="item2" disabled>Item 2</re-dropdown-item>
        <re-dropdown-item value="item3">Item 3</re-dropdown-item>
      </re-dropdown-menu>
    </template>
  </re-dropdown>
  <re-dropdown :options="treeOptions" @select="select">
    <re-button>
      Disabled Submenu Option
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
  <re-dropdown @select="select">
    <re-button>
      Disabled Submenu Item
      <arrow-downward class="ml-5px" />
    </re-button>
    <template #menu>
      <re-dropdown-menu>
        <re-dropdown-item value="Item 1">Item 1</re-dropdown-item>
        <re-dropdown-item value="Item 2">Item 2</re-dropdown-item>
        <re-dropdown-submenu disabled>
          <template #label>Item 3</template>
          <re-dropdown-item value="Item 3-1">Item 3-1</re-dropdown-item>
          <re-dropdown-item value="Item 3-2">Item 3-2</re-dropdown-item>
        </re-dropdown-submenu>
      </re-dropdown-menu>
    </template>
  </re-dropdown>
  <re-dropdown disabled :options="options" @select="select">
    <re-button disabled>
      Disabled Dropdown
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
</template>
<script lang="ts" setup>
import {
  ReDropdown,
  ReDropdownMenu,
  ReDropdownItem,
  ReDropdownSubmenu,
  ReButton,
  ReMessage,
  ArrowDownward
} from 'rappel-ui'

const options = [
  { label: 'option1', value: 'option1' },
  { label: 'option2', value: 'option2', disabled: true },
  { label: 'option3', value: 'option3' }
]

const treeOptions = [
  { label: 'option1', value: 'option1' },
  {
    label: 'option2',
    value: 'option2',
    disabled: true,
    children: [{ label: 'option2-1', value: 'option2-1' }]
  },
  { label: 'option3', value: 'option3' }
]

const select = (value: string) => {
  ReMessage.success(`You selected ${value}`)
}
</script>

Icon

Use icon prop to add an icon to the menu item. It accepts an icon name or a VNode component.

vue

<template>
  <re-dropdown :options="options" @select="select">
    <re-button>
      Dropdown Options List
      <arrow-downward class="ml-5px" />
    </re-button>
  </re-dropdown>
  <re-dropdown @select="select">
    <re-button>
      Dropdown Items List
      <arrow-downward class="ml-5px" />
    </re-button>
    <template #menu>
      <re-dropdown-menu>
        <re-dropdown-item value="item1" label="item-1" :icon="Star"></re-dropdown-item>
        <re-dropdown-item value="item2" icon="more-dot-circle-outline-horizontal">
          Item 2
        </re-dropdown-item>
        <re-dropdown-item value="item3">
          <Delete size="16" color="var(--re-color-danger-base)" class="mr-5px" />
          <span>Item 3</span>
        </re-dropdown-item>
      </re-dropdown-menu>
    </template>
  </re-dropdown>
</template>
<script lang="ts" setup>
import { ReDropdown, ReDropdownMenu, ReDropdownItem, ReButton, ReMessage } from 'rappel-ui'
import { ArrowDownward, Star, Delete } from '@rappel-ui/svg-icons'

const options = [
  {
    label: 'option1',
    value: 'option1',
    icon: 'copy',
    children: [
      { label: 'option1-1', value: 'option1-1', icon: 'check-circle' },
      { label: 'option1-2', value: 'option1-2', icon: 'delete' }
    ]
  },
  { label: 'option2', value: 'option2', icon: 'exclam' },
  { label: 'option3', value: 'option3', icon: 'more-line' }
]

const select = (value: string) => {
  ReMessage.success(`You selected ${value}`)
}
</script>

Name	Description	Type	Default
options	Data-driven rendering for Dropdown menu, accepts an array of menu items	`Array<OptionsItem>`: `interface`	—
item-props	Field Names Mapping for `options`	`interface`	—
close-on-select	Whether to close the dropdown menu when clicking a menu item	`boolean`	true
placement	Dropdown position	`enum`	bottom
trigger	The trigger event name	`enum`	hover
disabled	Whether Dropdown menu is disabled	`boolean`	—
visible / v-model:visible	Whether Dropdown is visible	`boolean`	—
offset	Offset from the reference edge. See Floating UI OffsetOptions for details	`number` \| `interface`	10
width	Dropdown width	`number` \| `string`	—
height	Dropdown height	`number` \| `string`	—
max-width	Dropdown max width	`number` \| `string`	—
max-height	Dropdown max height	`number` \| `string`	—
theme	Dropdown theme	`'dark' \|'light'`	light
reverse-theme	whether to reverse Dropdown theme color	`boolean`	false
append-to	Target element for appending Dropdown	`cssSelector` \| `HTMLElement`	body
teleported	Whether to teleport Dropdown to the `appendTo` target	`boolean`	true
persistent	Whether to keep the floating open on hover	`boolean`	true
click-to-toggle	Whether to toggle the floating on click, only `trigger='click'`	`boolean`	true
floating-class	Custom class for the floating	`string` \| `object` \| `Array`	—
floating-style	Custom style for the floating	`string` \| `object` \| `Array`	—
show-delay	Delay(ms) before Dropdown appears , but not effective when `visible` is present or `is-virtual` or `is-external`	`number`	0
hide-delay	Delay(ms) before Dropdown disappears , but not effective when `visible` is present or `is-virtual` or `is-external`	`number`	200
show-arrow	Whether to show arrow for Dropdown	`boolean`	true
arrow-size	The arrow size	`number`	8
arrow-offset	Padding between the arrow and the Dropdown edge	`number`	4
arrow-options	Floating UI ArrowOptions Parameters	`interface`	—
transition	Name of Vue3 Transition component	`string`	dropdown
css-transition	Css of Vue3 Transition component	`boolean`	true
strategy	The type of CSS position property to use	`'absolute' \| 'fixed'`	absolute
css-duration	Duration of Vue3 Transition component for fade in/fade out	`number`	300
boundary	Boundary of Floating UI DetectOverflowOptions : `interface`	`union`	clippingAncestors
alt-boundary	AltBoundary of Floating UI DetectOverflowOptions	`boolean`	false
root-boundary	RootBoundary of Floating UI DetectOverflowOptions	`union`	viewport
element-context	ElementContext of Floating UI DetectOverflowOptions	`'reference' \| 'floating'`	floating
flip-offset	Offset from boundary before flipping, Padding of Floating UI DetectOverflowOptions	`union`	8
flip-options	Floating UI FlipOptions Parameters	`interface`	—
inline-options	Floating UI InlineOptions Parameters	`interface`	—
is-external	Whether external reference is enabled	`boolean`	—
external-ref	External reference target	`HTMLElement`	—
is-virtual	Whether virtual reference is enabled	`boolean`	—
virtual-ref	Virtual reference object for Floating UI VirtualElement	`interface`	—

Name	Description	Parameters
select	Triggered when a menu item is clicked	`Function`
before-enter	Vue3 `<Transition>` event hook	`Function`
enter	Vue3 `<Transition>` event hook	`Function`
after-enter	Vue3 `<Transition>` event hook	`Function`
before-leave	Vue3 `<Transition>` event hook	`Function`
leave	Vue3 `<Transition>` event hook	`Function`
after-leave	Vue3 `<Transition>` event hook	`Function`
enter-cancelled	Vue3 `<Transition>` event hook	`Function`
leave-cancelled	Vue3 `<Transition>` event hook	`Function`

Name	Description	Type	Required
label	Text content of the menu item	`string`	false
value	Unique identifier for the menu item	`any`	true
disabled	Whether the menu item is disabled	`boolean`	false
children	Submenu items array	`Array<OptionsItem>`	false
has-children	Whether the menu item has submenus, controls submenu arrow icon visibility	`boolean`	false
icon	Prefix icon of the menu item	`string` \| `Component`	false

ItemProps

Attribute	Description	Type	Default
label	Specify which field in the data source maps to the option label	`string`	label
value	Specify which field in the data source maps to the option value	`string`	value
disabled	Specify which field in the data source maps to the option disabled state	`string`	disabled
children	Specify which field in the data source maps to the option children	`string`	children

Name	Description	Type	Default
item	Object for dropdown-item props	`interface`	`{ value: '' }`

Name	Description
menu	Customize dropdown-menu

Name	Description
default	Customize dropdown-menu items

Name	Description
label	Customize dropdown-item label text

Name	Description
default	Customize dropdown-item label text
icon	Customize dropdown-item prefix icon
sub-icon	Customize dropdown-submenu arrow icon
submenu	Customize the current dropdown-item submenu

Name	Description	Type
tooltipRef	The Dropdown tooltip instance element	`HTMLElement`

Dropdown ​

Basic Usage ​

Placement ​

Trigger ​

Tree ​

Disabled ​

Icon ​

Dropdown Attributes ​

Dropdown Events ​

OptionsItem Object or Dropdown-item Props ​

ItemProps ​

Dropdown-submenu Props ​

Dropdown Slots ​

Dropdown-menu Slots ​

Dropdown-submenu Slots ​

Dropdown-item Slots ​

Dropdown Exposes ​

Dropdown

Basic Usage

Placement

Trigger

Tree

Disabled

Icon

Dropdown Attributes

Dropdown Events

OptionsItem Object or Dropdown-item Props

ItemProps

Dropdown-submenu Props

Dropdown Slots

Dropdown-menu Slots

Dropdown-submenu Slots

Dropdown-item Slots

Dropdown Exposes