kitseed.
组件

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.sidetop / bottom / left / rightbottom优先展开方向
MenuContent.alignstart / center / endstart对齐方式
MenuContent.sideOffsetnumber6与锚点间距
MenuContent.positionMethodfixed / absolutefixed浮层定位策略
MenuTrigger.tooltipReactNode—触发器说明
菜单项 disabledbooleanfalse禁用动作
菜单项 disabledReasonstring—禁用原因
菜单项 tooltipReactNode—补充说明

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?booleanfalse
normalizeZoom?

Disable when the host owns popup coordinate normalization.

booleantrue
anchor?ComponentProps<typeof BaseMenu.Positioner>["anchor"]—
side?"top" | "bottom" | "left" | "right""bottom"
align?"start" | "center" | "end""start"
sideOffset?number6
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?booleanfalse

MenuSubmenuTrigger

属性类型默认值
unstyled?booleanfalse

MenuRadioItem

属性类型默认值
tooltip?ReactNode—
disabledReason?string | undefined—
unstyled?booleanfalse

MenuDangerItem

属性类型默认值
tooltip?ReactNode—
disabledReason?string | undefined—
unstyled?boolean—

MenuLabel

属性类型默认值
unstyled?booleanfalse

MenuSeparator

属性类型默认值
className?string—

MenuCheckboxItem

属性类型默认值
tooltip?ReactNode—
disabledReason?string | undefined—
unstyled?booleanfalse

本页内容