Dropdown 下拉菜单

Rue 的 Dropdown 现在同时支持两条路径：一条是保持当前视觉风格与 daisyUI 原生结构的写法；另一条是更贴近业务组件习惯的语义 API，直接支持menu / items、trigger、placement、open、popupRender 和右键菜单。

推荐写法

用 menu / items 描述命令菜单

更适合操作菜单、用户菜单、列表行操作和上下文菜单，不必再手写浮层结构。

daisyUI 自由组合写法

自由组合写法可用

details、popover、focus、位置类和 modifier 都没有删除。

交互补充

受控、右键、可选中、自定义面板

适合业务菜单、筛选菜单、带说明区的弹层菜单，以及需要区分关闭来源的场景。

何时使用

需要一个轻量命令面板，把 3 到 8 个动作收纳到按钮、头像或行内入口后面。
适合使用 Rue 当前 dropdown 视觉风格，同时使用更完整的菜单 API。
既要支持原生 HTML 结构，也要支持数据驱动菜单、受控状态和右键上下文菜单。

# 推荐：命令菜单

# 受控开关与来源

用单个触发器演示受控模式，按钮文本和状态说明都跟随open变化。

受控状态面板

当前状态closed

最近来源trigger

# 可选中筛选菜单

单选：overview

多选：mentions, comment

这类筛选面板通常会把 closeOnClick 设为 false，让用户连续选择。

# 自定义面板包装

# 右键上下文菜单

支持原生结构

# Dropdown using details and summary

# Dropdown using popover API

# Dropdown menu

# Positions

# Dropdown hover and force open

属性	说明	类型	默认值
`menu / items`	推荐的数据驱动入口。直接渲染命令菜单，支持 divider、group、submenu、selectable 等能力。	`DropdownMenuProps / MenuDataEntry[]`	`-`
`trigger`	控制打开方式，支持 hover、click、contextMenu；默认使用 hover。	`'hover' \| 'click' \| 'contextMenu' \| Array<...>`	`'hover'`
`open / defaultOpen / onOpenChange`	受控与非受控显隐；回调会额外返回 source，便于区分 trigger、menu、outside、escape。	`boolean / boolean / (open, info) => void`	`false / false / -`
`placement`	语义化定位别名，内部映射到 Rue 当前的 align + direction 组合。	`'bottomLeft' \| 'bottom' \| 'bottomRight' \| 'topLeft' \| ...`	`'bottomLeft'`
`overlay / content / popupRender`	自定义面板内容或在原面板外层追加头部、底部、快捷操作区。	`any / any / (originNode) => any`	`-`
`arrow / overlayClassName / overlayStyle`	使用 Rue 当前视觉基底，同时提供箭头与面板层定制。	`boolean / string / style object`	`false / - / -`
`align / direction / hover / forceOpen / forceClose`	基础 daisyUI 风格能力展示，适合原生结构或静态布局演示。	`扩展属性`	`-`
`children + Dropdown.Trigger / Dropdown.Content`	基础的 compound 结构继续可用；当你不想走数据驱动时，仍可手写原生内容。	`any`	`-`

menu 扩展

属性	说明	类型	默认值
`menu.items`	菜单项数组，复用 Rue Menu 的 item / divider / group / submenu 数据结构。	`MenuDataEntry[]`	`[]`
`menu.selectable / multiple / selectedKeys`	用于做筛选面板、视图切换、状态菜单等可选中场景。	`boolean / boolean / MenuKey[]`	`false / false / -`
`menu.onClick / onSelect / onOpenChange`	菜单项点击、选中和子菜单展开都复用 Menu 的回调结构。	`Menu callbacks`	`-`
`menu.triggerSubMenuAction`	增强命令菜单默认点击展开和折叠子菜单；需要悬浮展开时可显式设为 hover。	`'click' \| 'hover'`	`'click'`
`closeOnClick`	点击菜单项后是否自动关闭；命令菜单推荐保持默认 true，筛选面板常见设为 false。	`boolean`	`true`

FAQ

想做业务菜单、用户菜单、右键菜单时，优先用menu或items。
想保持完全原生的 HTML 结构时，可以使用Dropdown.Trigger+ Dropdown.Content，或直接写 details / summary。
需要筛选面板、多选菜单时，通常把closeOnClick设为false，并配合menu.selectable。
需要在面板里追加说明、底部操作区或二次确认按钮时，使用popupRender 包住基础内容。