HyMenuGroup

Usage examples on this page are written for Lit / plain HTML (<hy-menu-group>). The same component ships as HyMenuGroup in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

A grouping container for menu items. Renders an optional caption-styled label above its slotted items and carries either role="group" (default) or role="radiogroup".

When role="radiogroup", this element enforces single-selection among child hy-menu-item-radio elements: on any child change, every other child's checked is set to false.

Examples

Labeled group inside a menu

<hy-menu-group label="Clipboard">
  <hy-menu-item value="cut" label="Cut" shortcut="⌘X"></hy-menu-item>
  <hy-menu-item value="copy" label="Copy" shortcut="⌘C"></hy-menu-item>
  <hy-menu-item value="paste" label="Paste" shortcut="⌘V"></hy-menu-item>
</hy-menu-group>

Radio group with enforced single selection

<hy-menu-group label="Zoom" role="radiogroup">
  <hy-menu-item-radio value="zoom-50" label="50%"></hy-menu-item-radio>
  <hy-menu-item-radio value="zoom-100" label="100%" checked></hy-menu-item-radio>
  <hy-menu-item-radio value="zoom-150" label="150%"></hy-menu-item-radio>
</hy-menu-group>

API

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Section caption. Omitted when empty.
role	role	'group' | 'radiogroup'	'group'	group (default) for a plain section, radiogroup for a mutually exclusive set of hy-menu-item-radio children. Reflects directly to the host's ARIA role attribute.

Slots

Slot	Description
default	Menu items (hy-menu-item, checkbox / radio variants, dividers).

CSS Parts

Part	Description
label	The group label element.

CSS Custom Properties

Property	Description
--hy-menu-group-label-padding-block	—
--hy-menu-group-label-padding-inline	—
--hy-menu-group-label-text-transform	—
--hy-menu-group-label-letter-spacing	—