MenuItem

Present an option in a list or quick-action menu with icon, selected, and disabled states.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use MenuItem as an option within Listbox. For ordinary navigation, use Link or SidebarItem. A content list does not make every row a selectable option.

Use as="item" inside Listbox, and give each option in the same list a unique value.
disabled prevents activation. leading and trailing hold attachments; closeOnSelect controls whether selection closes the owning panel.
The built-in action for deleting a custom option follows LocaleProvider. Query text, option names, and values remain unchanged; the owning Listbox still manages deletion.

Import

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

Usage

States

Documentation language

Rich options

API Reference

Property	Type	Default	Example	Description
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={{ Button: { size: "sm" } }}`	Configure public Props such as size, class, and style on the built-in Delete button. Its event, accessible name, and role remain controlled by MenuItem; external children are unaffected.
`value`	`string`	`—`	`value="guides"`	Option value. Required and unique within a Listbox when using as="item". When standalone, it identifies the selection intent in events.
`singleLine`	`boolean`	`true`	`singleLine`	Use the shared Frame single-line preset for ordinary labels, preserving attachment sizes and at least 4 CSS px spacing. Defaults to true. Explicitly disable for complex multiline children; use Text lines=1 for label truncation and full-text access.
`selected`	`boolean`	`false`	`selected`	Whether this standalone item is selected. A Listbox host overrides it for as="item".
`active`	`boolean`	`false`	`active`	Whether this standalone item is highlighted. A Listbox host overrides it for as="item".
`disabled`	`boolean`	`false`	`disabled`	Disable activation and render at 20% opacity.
`showCheck`	`boolean`	`—`	`showCheck`	Show the trailing check slot. When omitted, it defaults on only for a selected standalone item, off in Listbox, and on in Select.
`closeOnSelect`	`boolean`	`—`	`closeOnSelect`	Whether activation requests the parent popup to close. If omitted, the parent popup decides its default policy.
`children`	`Snippet`	`—`	`<MenuItem as="item" value="guides"><Icon as="leading" icon={BookOpen} />Guides</MenuItem>`	Item content without arguments. Direct as="leading" and as="trailing" children participate in the root three-slot layout.