experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-menu-group
mode: provenance
representation: html
origin_response_id: a2274da5c3c6278dbb9f8b4dbc01e7a2
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.770Z
version_nonce: cebf38c3a42c834238dd875d0d952c6b
generated_at_utc: 2026-11-10T16:08:06.417Z
response_nonce: 71bb3914a99480d5b2491e10cf0279fb
Docs Version 1

<zg-menu-group>

Version 1

Interactive Storybook Playground

The <zg-menu-group> tag is a web component group wrapper for multiple menu items found in the context menu. ZingGrid dynamically creates this element to hold various <zg-menu-item> tags together for organizational purposes. As it is a visual element, it can be styled via CSS.

Image of the DOM relationship for the zg-menu-group web component tag

ZGMenuGroup Relationships
Component Relationship Type Ancestor
ZGMenu Parent Generated, Manual n/a
ZGIcon Child Generated n/a
ZGMenuItem Child Generated, Manual n/a

Related Web Components

Attributes

There are no attributes available for the <zg-menu-group> web component.

Top

CSS Variables

There are no CSS variables available for the <zg-menu-group> web component.

Top

CSS Selector

<zg-menu-group> can be styled with common CSS variables using the zg-menu-group selector, like so:

zg-menu-group {
  background: red;
}
Top

CSS Shadow Parts

<zg-menu-group> exposed elements within the shadow can be styled by CSS shadow parts, like so:

zg-menu-group::part(group) {
  background-color: red;
}

Below is a list of all the associated ZGMenuGroup shadow parts. Check out the full list of CSS shadow parts or our Styling Basics guide to learn more about styling the grid.

ZGMenuGroup CSS Shadow Parts
Name Description
group The container for the menu group
items The container for the menu group items
label The container for the menu group label
Top

Slots

<zg-menu-group> contains placeholders to allow adding markup inside the component.

<zg-menu-group><span slot="zgMenuGroupLabel">Slotted Content</span></zg-menu-group>

Below is a list of all the associated ZGMenuGroup slots. Check out the full list of slots.

ZGMenuGroup Slots
Name Description Demo
zgMenuGroupItems Menu group items that only accepts menu items (ZGMenuItems).
zgMenuGroupLabel Menu group label.
Top

[api: <zg-menu-group>]