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.

Used inside <hy-menu> — it only means something as part of it.

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".

The role is semantics only. role="radiogroup" tells assistive technology the section is a set of radios; which radios exclude one another is decided by their name, across the whole menu (see hy-menu-item-radio) — a group neither creates that set nor narrows it. Give the radios of one set the same name.

When not to use

• A handful of items: no groups. Keep the hy-menu flat, or split it once with an hy-divider.

Accessibility: your part

• Word each item so it makes sense without the group caption, which is not focusable.

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>

A set of radios in a section

<hy-menu-group label="Zoom" role="radiogroup">
  <hy-menu-item-radio name="zoom" value="zoom-50" label="50%"></hy-menu-item-radio>
  <hy-menu-item-radio name="zoom" value="zoom-100" label="100%" checked></hy-menu-item-radio>
  <hy-menu-item-radio name="zoom" 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 section of hy-menu-item-radio children. Reflects directly to the host's ARIA role attribute; it changes no behavior (radios exclude by name).

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

The documented hooks. Every override hook the component reads — one per token it paints — is listed in @whitespaceux/harmony/theme-api.json, and @whitespaceux/harmony/component-bindings.json (the Harmony MCP get-bindings tool) says which part and state each one paints.

Property	Default	Description
--hy-menu-group-padding-layout-2xs	var(--hy-padding-layout-2xs)	—
--hy-menu-group-padding-layout-sm	var(--hy-padding-layout-sm)	—
--hy-menu-group-label-text-transform	none	Case of the group label (none unless set: shown as written; uppercase for capitals). Display only — the label text stays as written.
--hy-menu-group-label-letter-spacing	var(--hy-caption-md-letter-spacing)	Letter spacing of the group label (the caption role's unless set; capitals usually want a little more).