这叫啥 UI？
← 返回组件目录

COMPONENT 18 · Actions & Menus

溢出菜单

Overflow Menu

也叫More MenuKebab MenuEllipsis Menu更多菜单

把低频操作收纳到省略号或更多按钮后的菜单中。

Moves lower-priority actions into a menu behind a More or ellipsis button.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 更多按钮
  • 菜单浮层
  • 次要操作项

适合使用

  • 操作较多且需要突出少数主要动作时。

不建议使用

  • 被收纳的是核心或高频操作时。

键盘与无障碍

  • 更多按钮必须有可访问名称；不要仅朗读为省略号，并复用标准菜单键盘行为。

DESCRIBE IT TO AI

这样告诉编程助手

实现溢出菜单（Overflow Menu）：把低频操作收纳到省略号或更多按钮后的菜单中。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<div class="demo stack">
  <button type="button" aria-haspopup="menu" aria-expanded="false">打开溢出菜单</button>
  <div role="menu" hidden>
    <button role="menuitem" tabindex="-1">重命名</button>
    <button role="menuitem" tabindex="-1">复制</button>
  </div>
  <output>尚未执行操作</output>
</div>