zg-menu

The <zg-menu> tag is a web component container for a custom menu for ZingGrid used as context or static (aka "Hamburger") menu. The element is generally dynamically inserted by the library, though the developer can append of overwrite menu with custom entries. The element can be styled using CSS variables and CSS selectors.

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

Related Web Components

Usage

The <zg-menu> is always available through right-click interactions on the grid. A <zg-menu> tag can be manually inserted inside the grid as slotted content:

<zing-grid 
  src="https://cdn.zinggrid.com/datasets/user-roles.json"
  context-menu="mymenu">
  <zg-menu id="mymenu" replace="true">
    <p>This content replaces the built-in menu</p>
  </zg-menu>
</zing-grid>

Or you can also use the static-menu attribute to use the default menu.

<zing-grid 
  src="https://cdn.zinggrid.com/datasets/user-roles.json"
  satic-menu>
</zing-grid>

Attributes

There a couple attributes to add and replace the <zg-menu>.

replace

Boolean

Description

Presence of attribute replaces the default context menu with a custom menu. If replace is not set, the custom menu will be appended to the end of the default menu.

Default Value

""

Accepted Values

  • N/A
Demo

CSS Variables

All the associated --zg-menu CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
  --zg-menu-font-size: 1.2rem;
}
ZGMenu CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-menu-backgroundBrowser's defaul valueStyles background of menu dropdown
--zg-menu-border1px solid var(--theme-border-color)Styles the border of menu dropdown
--zg-menu-border-bottomvar(--zg-menu-border, 1px solid var(--theme-border-color))Styles the bottom border of menu dropdown
--zg-menu-border-leftvar(--zg-menu-border, 1px solid var(--theme-border-color))Styles the left border of menu dropdown
--zg-menu-border-rightvar(--zg-menu-border, 1px solid var(--theme-border-color))Styles the right border of menu dropdown
--zg-menu-border-topvar(--zg-menu-border, 1px solid var(--theme-border-color))Styles the top border of menu dropdown
--zg-menu-box-shadow0 3px 3px #cccApplies a box shadow to menu dropdown
--zg-menu-font-size0.8remSets the font size of menu dropdown
--zg-menu-padding0Sets the padding of menu dropdown

CSS Selector

<zg-menu> can be styled by common CSS selectors.

zg-menu {
  background: red;
}