<zg-menu-item>

The <zg-menu-item> tag is a web component defining a single menu item in the grid's context menu defined by <zg-menu>. The element is typically dynamically generated, though it can be overwritten by a user's own custom <zg-menu-item> elements. The element can be styled via CSS variables or CSS selectors.

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

Related Web Components

Usage

The <zg-menu-item> is always available through right-click interactions on the grid. You can add items through slotted content as well:

<zing-grid 
  static-menu
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
 <zg-menu id="myMenu" type="contextmenu" style="display:none">
    <zg-menu-item id="complete">Mark as Complete</zg-menu-item>
    <zg-menu-item id="incomplete">Mark as Incomplete</zg-menu-item>
  </zg-menu>
</zing-grid>

Attributes

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

CSS Variables

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

:root {
  --zg-menu-item-background: red
}

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

ZGMenuItem CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-menu-item-backgroundvar(--zg-menu-background)Styles the background of menu item
--zg-menu-item-background_hovervar(--zg-menu-item-background, var(--zg-menu-background))Styles the background of menu item on hover
--zg-menu-item-bordervar(--zg-menu-border)Styles the border of menu item
--zg-menu-item-border-bottomvar(--zg-menu-border-bottom, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the bottom border of menu item
--zg-menu-item-border-bottom_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-bottom, var(--zg-menu-border-bottom, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the bottom border of menu item on hover
--zg-menu-item-border-leftvar(--zg-menu-border-left, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the left border of menu item
--zg-menu-item-border-left_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-left, var(--zg-menu-border-left, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the left border of menu item on hover
--zg-menu-item-border-rightvar(--zg-menu-border-right, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the border-right of menu item
--zg-menu-item-border-right_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-right, var(--zg-menu-border-right, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the right border of menu item on hover
--zg-menu-item-border-topvar(--zg-menu-border-top, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the border-top of menu item
--zg-menu-item-border-top_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-top, var(--zg-menu-border-top, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the top border of menu item on hover
--zg-menu-item-border_hovervar(--zg-menu-item-border, var(--zg-menu-border))Styles the border of menu item on hover
--zg-menu-item-colorvar(--zg-menu-color)Styles the color of menu item
--zg-menu-item-color_hovervar(--zg-menu-item-color, var(--zg-menu-color))Styles the color of menu item on hover
--zg-menu-item-displayinline-flexStyles the display of menu item
--zg-menu-item-justify-contentflex-startSets the horizontal alignment of contents in menu item
--zg-menu-item-justify-content_hovervar(--zg-menu-item-justify-content, flex-start)Sets the horizontal alignment of contents in menu item on hover
--zg-menu-item-justify-content_hovervar(--zg-menu-item-justify-content, flex-start)Sets the horizontal alignment of contents in menu item on hover
--zg-menu-item-padding2px 9pxSets the padding of menu item
--zg-menu-item-padding_hovervar(--zg-menu-item-padding, 2px 9px)Sets the padding of menu item on hover

CSS Selector

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

zg-menu-item {
  background: red;
}

Slots

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

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

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

ZGMenuItem Slots
NameDescriptionDemo
Menu item content.

[api: <zg-menu-item>]