---
title: "ZingGrid Web Component: `<zg-menu-group>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-menu-group>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-menu-group
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-menu-group.md
mode: provenance
representation: markdown
origin_response_id: b768a9f4a23e899eaa89ab42114bc4c2
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.640Z
version_nonce: 03847dc61881349b65aa3d5dde122c29
generated_at_utc: 2026-11-09T16:15:19.310Z
response_nonce: d52ec2d1fab9d92fda49cdbfc5039398
```

# `<zg-menu-group>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-menu-group--docs)

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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-menu-group-web-component-dom.png "Image of the DOM relationship for the zg-menu-group web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGMenu](https://www.zinggrid.com/docs/api/tags/zg-menu) | Parent | Generated, Manual | n/a |
| [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Generated | n/a |
| [ZGMenuItem](https://www.zinggrid.com/docs/api/tags/zg-menu-item) | Child | Generated, Manual | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-menu>`](https://www.zinggrid.com/docs/api/tags/zg-menu/)
- [`<zg-menu-item>`](https://www.zinggrid.com/docs/api/tags/zg-menu-item/)
- [`<zg-button>`](https://www.zinggrid.com/docs/api/tags/zg-button/)
- [`<zg-icon>`](https://www.zinggrid.com/docs/api/tags/zg-icon/)
- [`<zg-checkbox>`](https://www.zinggrid.com/docs/api/tags/zg-checkbox/)

## Attributes

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

## CSS Variables

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

## CSS Selector

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

```css
zg-menu-group {
  background: red;
}
```

## CSS Shadow Parts

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

```css
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](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

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

## Slots

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

```html
<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](https://www.zinggrid.com/docs/api/styling/css-shadow-parts).

| Name | Description |
| --- | --- |
| `zgMenuGroupItems` | Menu group items that only accepts menu items (ZGMenuItems). |
| `zgMenuGroupLabel` | Menu group label. |