MenuItem

在选项列表或快捷操作面板中呈现一项内容，支持图标、选中状态与禁用反馈。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

作为 Listbox 中的选项使用。普通导航使用 Link 或 SidebarItem；不要把内容列表每行都变成可选择选项。

接入 Listbox 时使用 as="item"，同一列表的 value 必须唯一。
disabled 禁止操作；leading / trailing 放置附件，closeOnSelect 决定选中后是否关闭所属面板。
自定义选项的内置删除名称随 LocaleProvider 切换；查询、选项名称和值保持原样，删除仍由所属 Listbox 管理。

导入

import { MenuItem } from '@snowui-design-system/components';

用法

状态

文档语言

丰富选项

API 参考

属性	类型	默认值	示例	描述
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={{ Button: { size: "sm" } }}`	配置默认内置删除按钮的公开 Props（如 size、class、style）；删除事件、可访问名称和角色仍由组件控制，不影响外置子项。
`value`	`string`	`—`	`value="guides"`	选项值（通过 as="item" 接入 Listbox 时必填且同一列表内唯一；独立使用时作为选择意图事件的业务标识）
`singleLine`	`boolean`	`true`	`singleLine`	普通菜单标签内部复用Frame单行预设，保持附件Hug与最小4 CSS px间距；复杂多行children可显式false并由其内容owner排版。长标签用Text lines=1提供截断和全文。
`selected`	`boolean`	`false`	`selected`	是否选中（独立使用时有效；使用 as="item" 接入 Listbox 后由宿主覆盖）
`active`	`boolean`	`false`	`active`	是否高亮（独立使用时有效；使用 as="item" 接入 Listbox 后由宿主覆盖）
`disabled`	`boolean`	`false`	`disabled`	是否禁用（opacity 0.2，阻止点击）
`showCheck`	`boolean`	`—`	`showCheck`	是否渲染 trailing 勾选槽位；未设置时仅独立 `selected` 项默认开启，Listbox 默认关闭，Select 默认开启
`closeOnSelect`	`boolean`	`—`	`closeOnSelect`	点击后是否请求父级浮层关闭；未设置时由父级浮层决定默认策略
`children`	`Snippet`	`—`	`<MenuItem as="item" value="guides"><Icon as="leading" icon={BookOpen} />Guides</MenuItem>`	无参数的操作项内容；直系 `as="leading"` / `as="trailing"` 子项会参与根级三槽位布局