Menu 动作菜单
以清晰分组和可靠焦点组织次要操作。
Menu 用于动作、菜单式筛选、单选或多选菜单项。普通表单选择用 Choice Picker;有重要后果的动作应打开 Confirm Dialog,而非在展开菜单时立即执行。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/menu.json首次使用请先完成 Registry 与主题接入。
组成与状态
组合 MenuRoot、MenuTrigger、MenuContent 与 MenuItem。MenuGroup / MenuLabel / MenuSeparator 建立分组;互斥值用 MenuRadioGroup、MenuRadioItem,多选用 MenuCheckboxItem;子菜单使用 MenuSubmenuRoot 和 MenuSubmenuTrigger。
Props
| 组件 / 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
MenuContent.side | top / bottom / left / right | bottom | 优先展开方向 |
MenuContent.align | start / center / end | start | 对齐方式 |
MenuContent.sideOffset | number | 6 | 与锚点间距 |
MenuContent.positionMethod | fixed / absolute | fixed | 浮层定位策略 |
MenuTrigger.tooltip | ReactNode | — | 触发器说明 |
菜单项 disabled | boolean | false | 禁用动作 |
菜单项 disabledReason | string | — | 禁用原因 |
菜单项 tooltip | ReactNode | — | 补充说明 |
Root、Trigger 与各类 Item 透传对应 Base UI 属性。disabledReason 只解释原因,须同时传入 disabled。MenuContent 另支持 anchor、positionMethod、collisionAvoidance 与 positionerStyle;危险项使用 MenuDangerItem。
键盘与约束
Base UI 管理展开、方向键、菜单项导航与 Escape。保持触发器可聚焦,关闭后应回到合理起点。菜单项名称应描述动作,危险操作靠近末尾并用分隔组织。
默认使用视口固定定位,浮层在滚动容器中跟随触发器,并保持页面缩放后的视觉大小。只有需要绝对定位时才传 positionMethod="absolute";不要用额外的平移样式补偿位置。
避免这样使用
不要让每个菜单项再嵌套按钮;不要为了展示说明而让不可操作项接收 click;不要将复杂编辑表单塞入菜单。
来源与版本
0.1.0,来自 Subtic apps/web/components/ui/menu.tsx 和 picker-styles.ts。写权限改为应用传入的禁用状态与原因。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
MenuTrigger
| 属性 | 类型 | 默认值 |
|---|---|---|
tooltip? | ReactNode | — |
MenuContent
| 属性 | 类型 | 默认值 |
|---|---|---|
unstyled? | boolean | false |
normalizeZoom?Disable when the host owns popup coordinate normalization. | boolean | true |
anchor? | ComponentProps<typeof BaseMenu.Positioner>["anchor"] | — |
side? | "top" | "bottom" | "left" | "right" | "bottom" |
align? | "start" | "center" | "end" | "start" |
sideOffset? | number | 6 |
positionMethod? | ComponentProps<typeof BaseMenu.Positioner>["positionMethod"] | "fixed" |
collisionAvoidance? | ComponentProps<typeof BaseMenu.Positioner>["collisionAvoidance"] | — |
positionerStyle? | ComponentProps<typeof BaseMenu.Positioner>["style"] | — |
MenuItem
| 属性 | 类型 | 默认值 |
|---|---|---|
tooltip? | ReactNode | — |
disabledReason? | string | undefined | — |
unstyled? | boolean | false |
MenuSubmenuTrigger
| 属性 | 类型 | 默认值 |
|---|---|---|
unstyled? | boolean | false |
MenuRadioItem
| 属性 | 类型 | 默认值 |
|---|---|---|
tooltip? | ReactNode | — |
disabledReason? | string | undefined | — |
unstyled? | boolean | false |
MenuDangerItem
| 属性 | 类型 | 默认值 |
|---|---|---|
tooltip? | ReactNode | — |
disabledReason? | string | undefined | — |
unstyled? | boolean | — |
MenuLabel
| 属性 | 类型 | 默认值 |
|---|---|---|
unstyled? | boolean | false |
MenuSeparator
| 属性 | 类型 | 默认值 |
|---|---|---|
className? | string | — |
MenuCheckboxItem
| 属性 | 类型 | 默认值 |
|---|---|---|
tooltip? | ReactNode | — |
disabledReason? | string | undefined | — |
unstyled? | boolean | false |