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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-separator.md
mode: provenance
representation: markdown
origin_response_id: a19821239cbe01c5f2ebc304145354a6
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.780Z
version_nonce: 20db788154581eff34dd2283f4c77fa3
generated_at_utc: 2026-10-21T23:41:29.514Z
response_nonce: 2f3f30ef76494afe2d3b23aae1883c1e
```

# `<zg-separator>`

Version 1

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

The `<zg-separator>` tag is a web component that specifies the horizontal bar in the `<zg-menu>` to separate
items. The `<zg-separator>` element is created dynamically and **should not be manually inserted by users**.  The separator is styleable via CSS variables or the `zg-separator` CSS selector.

![Image of the DOM relationship for the zg-separator web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-separator-web-component-dom.png "Image of the DOM relationship for the zg-separator web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGControlbar](https://www.zinggrid.com/docs/api/tags/zg-controlbar) | Parent | Generated | n/a |
| [ZGMenu](https://www.zinggrid.com/docs/api/tags/zg-menu) | Parent | 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/)

## Usage

To show the `<zg-separator>`, the user must first enable the menu. `<zg-menu>` is **always** available through right-click interactions on the grid.

A `<zg-menu>` tag can be manually inserted inside the grid as slotted content:

```html
<zing-grid
  src="https://cdn.zinggrid.com/datasets/user-roles.json"
  context-menu="mymenu">
  <zg-menu id="mymenu" replace="true">
    <p>This content replaces the built-in menu</p>
  </zg-menu>
</zing-grid>
```

## Attributes

There are no attributes available for the `<zg-separator>` web component.

## CSS Variables

`<zg-separator>` can be styled with CSS variables, like so:

```css
:root {
  --zg-separator-border: 1px dashed red;
}
```

Below is a list of all the associated `--zg-separator` 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-separator-border` | 1px solid var(--theme-border-color) | Styles the border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/RNVZ20TC) |
| `--zg-separator-border-bottom` | var(--zg-separator-border, 1px solid var(--theme-border-color)) | Styles the bottom border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/LUS0AQM5) |
| `--zg-separator-border-left` | var(--zg-separator-border, 0) | Styles the left border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/1644TNHT) |
| `--zg-separator-border-right` | var(--zg-separator-border, 1px solid var(--theme-border-color)) | Styles the right border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/0E92TO7L) |
| `--zg-separator-border-top` | var(--zg-separator-border, 0) | Styles the top border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/VLP6EXTJ) |
| `--zg-separator-margin` | 5px 0 | Sets the margin of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/M1YEHDNJ) |

## CSS Selector

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

```css
zg-separator {
  border: 1px dashed red;
}
```

## Slots

There are no slots available for the `<zg-separator>` web component.