Dropdown Menu 下拉菜单
从一个可见触发器展开一组紧凑命令、选择项或子菜单。
使用概览
适合使用
- 次要操作较多，不适合全部常驻在工具栏中时。
不建议使用
- 操作是当前页面的主要行动，或选项需要持续可见比较时。
真实示例
更多操作菜单
收纳复制链接与归档等次要命令。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/dropdown-menu.json基础用法
导入
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@richardqiu/quartz/dropdown-menu";JSX
<DropdownMenu><DropdownMenuTrigger>更多操作</DropdownMenuTrigger><DropdownMenuContent><DropdownMenuItem>复制链接</DropdownMenuItem><DropdownMenuItem>归档</DropdownMenuItem></DropdownMenuContent></DropdownMenu>状态与控制摘要
默认
悬停
键盘焦点可见
已禁用
已勾选
已选择
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
defaultOpen | boolean | false | 设置非受控菜单首次渲染时是否打开。 |
组合结构
- 01
DropdownMenu - 02
DropdownMenuTrigger - 03
DropdownMenuContent - 04
DropdownMenuItem - 05
DropdownMenuSub
键盘约定
- Enter 或空格键打开菜单；方向键、Home、End 与预输入移动焦点；Escape 关闭并还原焦点。
- LTR 使用右方向键打开子菜单，RTL 使用左方向键。
可访问性契约
- 复选与单选菜单项暴露选中状态，且必须保留可见文字。
- 禁用项可被感知但会跳过键盘导航；危险色调不会自动增加确认。