<zg-menu-item>

Interactive Storybook Playground

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

ZGMenuItem Relationships
Component Relationship Type Ancestor
ZGMenu Parent Generated, Manual n/a
ZGButton Child Generated n/a

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

Attributes

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

Top

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
Name Default Description Demo CSS Ref
--zg-menu-item-background var(--zg-menu-background) Styles the background of menu item
--zg-menu-item-background_hover var(--zg-menu-item-background, var(--zg-menu-background)) Styles the background of menu item on hover
--zg-menu-item-border var(--zg-menu-item-border, 0) Styles the border of menu item
--zg-menu-item-border-bottom var(--zg-menu-border-bottom, var(--zg-menu-item-border)) Styles the bottom border of menu item
--zg-menu-item-border-bottom_hover var(--zg-menu-item-border_hover, var(--zg-menu-item-border-bottom, var(--zg-menu-item-border))) Styles the bottom border of menu item on hover
--zg-menu-item-border-left var(--zg-menu-border-left, var(--zg-menu-item-border)) Styles the left border of menu item
--zg-menu-item-border-left_hover var(--zg-menu-item-border_hover, var(--zg-menu-item-border-left, var(--zg-menu-item-border))) Styles the left border of menu item on hover
--zg-menu-item-border-right var(--zg-menu-border-right, var(--zg-menu-item-border)) Styles the border-right of menu item
--zg-menu-item-border-right_hover var(--zg-menu-item-border_hover, var(--zg-menu-item-border-right, var(--zg-menu-item-border))) Styles the right border of menu item on hover
--zg-menu-item-border-top var(--zg-menu-border-top, var(--zg-menu-item-border)) Styles the border-top of menu item
--zg-menu-item-border-top_hover var(--zg-menu-item-border_hover, var(--zg-menu-item-border-top, var(--zg-menu-item-border))) Styles the top border of menu item on hover
--zg-menu-item-border_hover var(--zg-menu-item-border) Styles the border of menu item on hover
--zg-menu-item-color var(--zg-menu-color) Styles the color of menu item
--zg-menu-item-color_hover var(--zg-menu-item-color, var(--zg-menu-color)) Styles the color of menu item on hover
--zg-menu-item-justify-content flex-start Sets the horizontal alignment of contents in menu item
--zg-menu-item-justify-content_hover var(--zg-menu-item-justify-content, flex-start) Sets the horizontal alignment of contents in menu item on hover
--zg-menu-item-padding 2px 9px Sets the padding of menu item
--zg-menu-item-padding_hover var(--zg-menu-item-padding, 2px 9px) Sets the padding of menu item on hover
Top

CSS Selector

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

zg-menu-item {
  background: red;
}
Top

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

[api: <zg-menu-item>]