--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/api/tags/zg-menu --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-menu.md mode: provenance representation: markdown origin_response_id: f23967dc2576f74045c07b3b8abe0db4 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.642Z version_nonce: 8f1265b9684dc17c34463223b8d6f1c4 generated_at_utc: 2026-11-07T21:34:20.220Z response_nonce: 3af25c32949dccaf342cc8fa9c2e82b1 ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-menu--docs) The `` 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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-menu-web-component-dom.png "Image of the DOM relationship for the zg-menu web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated, Manual | n/a | | [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Manual | n/a | | [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a | | [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a | | [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Manual | n/a | | [ZGMenuGroup](https://www.zinggrid.com/docs/api/tags/zg-menu-group) | Child | Generated, Manual | n/a | | [ZGMenuItem](https://www.zinggrid.com/docs/api/tags/zg-menu-item) | Child | Generated, Manual | n/a | | [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Manual | n/a | | [ZGSeparator](https://www.zinggrid.com/docs/api/tags/zg-separator) | Child | Generated | n/a | | [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zing-grid/) - [``](https://www.zinggrid.com/docs/api/tags/zg-menu-group/) - [``](https://www.zinggrid.com/docs/api/tags/zg-menu-item/) - [``](https://www.zinggrid.com/docs/api/tags/zg-button/) - [``](https://www.zinggrid.com/docs/api/tags/zg-icon/) - [``](https://www.zinggrid.com/docs/api/tags/zg-checkbox/) ## Usage The `` is **always** available through right-click interactions on the grid. A `` tag can be manually inserted inside the grid as slotted content, like so: ```html

This content replaces the built-in menu

 ``` You can also add a default menu via the `static-menu` attribute, like so: ```html ``` ## Attributes There are a couple attributes to add and replace ``. **** ### replace 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. - Type: Boolean - Default: `""` - Accepted values: N/A - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/57Z2RG8B) ## CSS Variables `` can be styled with CSS variables, like so: ```css :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](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-background` | Browser's defaul value | Styles background of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/H302IPDV) | | `--zg-menu-border` | 1px solid var(--theme-border-color) | Styles the border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/L29XD0SG) | | `--zg-menu-border-bottom` | var(--zg-menu-border, 1px solid var(--theme-border-color)) | Styles the bottom border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/BP6Q1ONR) | | `--zg-menu-border-left` | var(--zg-menu-border, 1px solid var(--theme-border-color)) | Styles the left border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/YTOQWH4D) | | `--zg-menu-border-right` | var(--zg-menu-border, 1px solid var(--theme-border-color)) | Styles the right border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/9PZS6F7O) | | `--zg-menu-border-top` | var(--zg-menu-border, 1px solid var(--theme-border-color)) | Styles the top border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/60VFS9X7) | | `--zg-menu-box-shadow` | 0 3px 3px #ccc | Applies a box shadow to menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/8KM669HT) | | `--zg-menu-font-size` | 0.8rem | Sets the font size of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/H08WWNC4) | | `--zg-menu-padding` | 0 | Sets the padding of the menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/O1VERLUD) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-menu { background: red; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css 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](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Description | | --- | --- | | `menu` | The container for the menu | ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content ``` Below is a list of all the associated ZGMenu slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | 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. |