---
title: "ZingGrid Web Component: `<zg-menu-item>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-menu-item>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-menu-item
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-menu-item.md
mode: provenance
representation: markdown
origin_response_id: 89dd5c708687c1a3c75e642c2d23832a
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.641Z
version_nonce: f747f064874fc737d7c257a37c2ad343
generated_at_utc: 2026-11-08T23:36:18.265Z
response_nonce: 8116e8a4e2a1890236ef382e292a93f7
```

# `<zg-menu-item>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-menu-item--docs)

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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-menu-item-web-component-dom.png "Image of the DOM relationship for the zg-menu-item web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGMenu](https://www.zinggrid.com/docs/api/tags/zg-menu) | Parent | Generated, Manual | n/a |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Generated | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-menu>`](https://www.zinggrid.com/docs/api/tags/zg-menu/)
- [`<zg-menu-group>`](https://www.zinggrid.com/docs/api/tags/zg-menu-group/)
- [`<zg-button>`](https://www.zinggrid.com/docs/api/tags/zg-button/)
- [`<zg-icon>`](https://www.zinggrid.com/docs/api/tags/zg-icon/)
- [`<zg-checkbox>`](https://www.zinggrid.com/docs/api/tags/zg-checkbox/)

## Usage

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

```html
<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:

```css
: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](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-menu-item-background` | var(--zg-menu-background) | Styles the background of menu item | [Example code](https://app.zingsoft.com/demos/embed/B9ZW7JZ1) |
| `--zg-menu-item-background_hover` | var(--zg-menu-item-background, var(--zg-menu-background)) | Styles the background of menu item on hover | [Example code](https://app.zingsoft.com/demos/embed/TGJCKUFU) |
| `--zg-menu-item-border` | var(--zg-menu-item-border, 0) | Styles the border of menu item | [Example code](https://app.zingsoft.com/demos/embed/OY846P1S) |
| `--zg-menu-item-border_hover` | var(--zg-menu-item-border) | Styles the border of menu item on hover | [Example code](https://app.zingsoft.com/demos/embed/COY3QOQ4) |
| `--zg-menu-item-border-bottom` | var(--zg-menu-border-bottom, var(--zg-menu-item-border)) | Styles the bottom border of menu item | [Example code](https://app.zingsoft.com/demos/embed/K3RGBXUS) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/Y257HM34) |
| `--zg-menu-item-border-left` | var(--zg-menu-border-left, var(--zg-menu-item-border)) | Styles the left border of menu item | [Example code](https://app.zingsoft.com/demos/embed/I02JZBV4) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/L6B0TSI2) |
| `--zg-menu-item-border-right` | var(--zg-menu-border-right, var(--zg-menu-item-border)) | Styles the border-right of menu item | [Example code](https://app.zingsoft.com/demos/embed/XBLE7Y9F) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/B0CA9PC5) |
| `--zg-menu-item-border-top` | var(--zg-menu-border-top, var(--zg-menu-item-border)) | Styles the border-top of menu item | [Example code](https://app.zingsoft.com/demos/embed/JXUI3ZZ1) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/IEQ87DM1) |
| `--zg-menu-item-color` | var(--zg-menu-color) | Styles the color of menu item | [Example code](https://app.zingsoft.com/demos/embed/PB332NEO) |
| `--zg-menu-item-color_hover` | var(--zg-menu-item-color, var(--zg-menu-color)) | Styles the color of menu item on hover | [Example code](https://app.zingsoft.com/demos/embed/G87OUAAS) |
| `--zg-menu-item-justify-content` | flex-start | Sets the horizontal alignment of contents in menu item | [Example code](https://app.zingsoft.com/demos/embed/E73X0A1J) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/E0CSUDJQ) |
| `--zg-menu-item-padding` | 2px 9px | Sets the padding of menu item | [Example code](https://app.zingsoft.com/demos/embed/J8SC2JZ7) |
| `--zg-menu-item-padding_hover` | var(--zg-menu-item-padding, 2px 9px) | Sets the padding of menu item on hover | [Example code](https://app.zingsoft.com/demos/embed/2L3WUNZM) |

## CSS Selector

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

```css
zg-menu-item {
  background: red;
}
```
## Slots

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

```html
<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](https://www.zinggrid.com/docs/api/styling/css-shadow-parts).

| Name | Description |
| --- | --- |
| (default) | Menu item content. |