Dropdown

Matches Arco Dropdown with subtle option hover backgrounds and the default Element Plus arrow. See the Element Plus docs for props.

Click Menu

Click to open the menu; disabling its arrow brings the panel closer to Arco.

<script setup lang="ts">
import { ref } from 'vue'
const command = ref('none')
</script>

<template>
  <el-dropdown trigger="click" :show-arrow="false" @command="command = $event">
    <el-button>Open menu</el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="edit">Edit</el-dropdown-item>
        <el-dropdown-item command="copy">Copy link</el-dropdown-item>
        <el-dropdown-item command="delete" disabled>Delete</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <el-text>Selected: {{ command }}</el-text>
</template>

Hover & Extended Sizes

Hover-triggered sizes extend the theme using Element Plus increments; divided keeps a separator.

<script setup lang="ts">
const sizes = ['small', 'default', 'large'] as const
</script>

<template>
  <el-dropdown v-for="size in sizes" :key="size" :size="size">
    <el-button :size="size">{{ size }}</el-button>
    <template #dropdown>
      <el-dropdown-menu><el-dropdown-item>Edit</el-dropdown-item><el-dropdown-item divided>Archive</el-dropdown-item></el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

Differences from Arco

• The default arrow, divided options and sizes have no Arco equivalent and retain their configuration with themed styling.
• Options retain Element Plus keyboard focus behavior.