Docs

<zg-menu>

Interactive Storybook Playground

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

ZGMenu Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated, Manual n/a
ZGButton Child Manual n/a
ZGCheckbox Child Manual n/a
ZGIcon Child Manual n/a
ZGInput Child Manual n/a
ZGMenuGroup Child Generated, Manual n/a
ZGMenuItem Child Generated, Manual n/a
ZGSelect Child Manual n/a
ZGSeparator Child Generated n/a
ZGText Child Manual n/a

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

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
Top

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
Name Default Description Demo CSS Ref
--zg-menu-background Browser's defaul value Styles background of menu dropdown
--zg-menu-border 1px solid var(--theme-border-color) Styles the border of menu dropdown
--zg-menu-border-bottom var(--zg-menu-border, 1px solid var(--theme-border-color)) Styles the bottom border of menu dropdown
--zg-menu-border-left var(--zg-menu-border, 1px solid var(--theme-border-color)) Styles the left border of menu dropdown
--zg-menu-border-right var(--zg-menu-border, 1px solid var(--theme-border-color)) Styles the right border of menu dropdown
--zg-menu-border-top var(--zg-menu-border, 1px solid var(--theme-border-color)) Styles the top border of menu dropdown
--zg-menu-box-shadow 0 3px 3px #ccc Applies a box shadow to menu dropdown
--zg-menu-font-size 0.8rem Sets the font size of menu dropdown
--zg-menu-padding 0 Sets the padding of the menu dropdown
Top

CSS Selector

<zg-menu> can be styled by common CSS selectors, like so:

zg-menu {
  background: red;
}
Top

CSS Shadow Parts

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

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

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

ZGMenu CSS Shadow Parts
Name Description
menu The container for the menu
Top

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
Name Description Demo
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.
Top

[api: <zg-menu>]