<zg-menu>

The <zg-menu> tag is a web component container for a custom menu that can be used as a context or static (aka "Hamburger") menu. The element is generally dynamically inserted by the library, but the developer can append or overwrite the 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, like so:

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

You can also add a default menu via the static-menu attribute, like so:

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

Attributes

There are a couple attributes to add and replace <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

<zg-menu> can be styled with CSS variables, like so:

:root {
  --zg-menu-font-size: 1.2rem;
}

Below is a list of all the associated --zg-menu CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

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, like so:

zg-menu {
  background: red;
}

Slots

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

<zg-menu>Slotted Content</zg-menu>

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

ZGMenu Slots
NameDescriptionDemo
Menu content. Overwrites default menu when `[replace]` is present, else appends to the end of the default menu. Accepts ZGMenuGroup, ZGMenuItem, and ZGSeparator to construct custom menu.

[api: <zg-menu>]