Skip to content

Dropdown 下拉菜单

收纳相关操作。帮助用户理解位置并移动到目标内容。

实时示例

LIVE · DropdownElement Plus / sunui
Vue 示例
<el-dropdown />

使用规则

应该

当前项、可访问项和禁用项必须有清晰区别,不承载与导航无关的复杂操作。

避免

不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。

状态与变体

  • 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
  • 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
  • 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。

基础用法

<el-dropdown>下拉菜单</el-dropdown>

设计变量

color.interactive.primarycolor.background.subtlespacing.smradius.sm

无障碍

当前页面使用 aria-current;支持键盘导航;焦点不能被固定元素遮挡。