<zg-menu-group>

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