Menu
menu下拉菜单 · Base UI 命令式 + Item/分隔/分组 + danger
用法
基础用法
Trigger 用 render 接管任意触发元素，Content 内放 MenuItem，Separator 分隔。
tsx
<Menu>
<MenuTrigger render={<Button variant="outline">菜单</Button>} />
<MenuContent>
<MenuItem>编辑</MenuItem>
<MenuItem>复制</MenuItem>
<MenuSeparator />
<MenuItem variant="danger">删除</MenuItem>
</MenuContent>
</Menu>禁用项
MenuItem 加 disabled 后不可高亮、不可点击。
tsx
<Menu>
<MenuTrigger render={<Button variant="outline">菜单</Button>} />
<MenuContent>
<MenuItem>编辑</MenuItem>
<MenuItem disabled>归档（禁用）</MenuItem>
</MenuContent>
</Menu>分组
MenuGroup + MenuGroupLabel 给一组菜单项加小标题。
tsx
<Menu>
<MenuTrigger render={<Button variant="outline">菜单</Button>} />
<MenuContent>
<MenuGroup>
<MenuGroupLabel>操作</MenuGroupLabel>
<MenuItem>编辑</MenuItem>
<MenuItem>复制</MenuItem>
</MenuGroup>
<MenuSeparator />
<MenuItem variant="danger">删除</MenuItem>
</MenuContent>
</Menu>弹出方位
MenuContent 的 side / align 控制浮层相对触发器的方位。
tsx
<Menu>
<MenuTrigger render={<Button variant="outline">菜单</Button>} />
<MenuContent side="right" align="start">
<MenuItem>编辑</MenuItem>
<MenuItem>复制</MenuItem>
</MenuContent>
</Menu>何时用
点击触发器弹出的一组操作项（编辑/复制/删除等），适合表格行操作、卡片更多按钮、头像账号菜单。需要 hover 展开的 mega 站点导航用 NavigationMenu；多个顶层菜单横排成 File/Edit/View 菜单条用 Menubar。
导入
ts
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, MenuGroup, MenuGroupLabel, menuItemVariants } from "@hulianui/ui"Props
MenuContent
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "bottom" | 弹出方位 |
| align | "start" | "center" | "end" | "start" | 沿触发器的对齐 |
| sideOffset | number | — | 与触发器的间距(px) |
| className | string | — | — |
MenuItem
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| disabled | boolean | false | 禁用 |
| closeOnClick | boolean | true | 点击后是否关闭菜单 |
| label | string | — | 键盘 type-ahead 的文案覆盖 |
| variant | "default" | "danger" | "default" | danger 为危险操作（红色） |
| className | string | — | — |
MenuTrigger 用 render={<Button />} 把任意元素作触发器。
Events
MenuItem
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | MouseEventHandler<HTMLElement> | 点击回调 |
Slots
MenuContent
| 插槽 | 类型 | 说明 |
|---|---|---|
| children* | ReactNode | 菜单项 |
MenuItem
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 项内容 |
禁忌 / 坑
- [[base-ui-menu-group-label-requires-menu-group-wrapper]]：
MenuGroupLabel直接放进MenuContent（不裹MenuGroup）会在「点开菜单」那一刻抛MenuGroupRootContext is missing，触发器渲染正常但点击崩页 —— 分组标签必须包在MenuGroup里。
相关
Navbar · BeianFooter · NavMenu · NavigationMenu · Menubar · Dock
Playground
<Menu>
<MenuTrigger render={<Button>菜单</Button>} />
<MenuContent side="bottom" align="start">
<MenuItem>编辑</MenuItem>
<MenuSeparator />
<MenuItem variant="danger">删除</MenuItem>
</MenuContent>
</Menu>