• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

    •

    <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

    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.

    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.