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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-control-bar.md
mode: provenance
representation: markdown
origin_response_id: e551675495b48f1abd8f246c1a3d8d63
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.626Z
version_nonce: 8160a38224be564ca6c211f7a107285c
generated_at_utc: 2026-10-24T21:38:29.633Z
response_nonce: 598672bc6978e25af8b6493ecc2286e7
```

# `<zg-control-bar>`

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

The `<zg-control-bar>` tag is a web component that serves as a container for the grid's interface controls. As a generated element, **the user should not manually place `<zg-control-bar>` in their grid**. However, users can style the component's internal elements using CSS.

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

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGHeader](https://www.zinggrid.com/docs/api/tags/zg-header) | Parent | Generated | n/a |
| [ZGLayoutControls](https://www.zinggrid.com/docs/api/tags/zg-layout-controls) | Child | Generated | n/a |
| [ZGSeparator](https://www.zinggrid.com/docs/api/tags/zg-separator) | Child | Generated | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-header>`](https://www.zinggrid.com/docs/api/tags/zg-header/)
- [`<zg-layout-controls>`](https://www.zinggrid.com/docs/api/tags/zg-layout-controls/)

## Usage

TO trigger the `<zg-control-bar>` to show, you'll need to also enable `layout-controls`, like so:

```html
<zing-grid
  layout-controls
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>
```

After `<zg-control-bar>` is initialized, you must define some styling, like so:

```css
zing-grid {
  --zg-control-bar-border: 10px solid #EF5350;
}
```

## Attributes

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

## CSS Variables
`<zg-control-bar`> can be styled with CSS variables, like so:

```css
:root {
--zg-control-bar-padding: 2rem;
}
```

Below is a list of all the associated `--zg-control-bar` 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-control-bar-background` | Browser's default value | Styles the background of control-bar | [Example code](https://app.zingsoft.com/demos/embed/8QU13CU5) |
| `--zg-control-bar-border` | 1px solid var(--theme-border-color) | Styles the border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/A5JYDEGW) |
| `--zg-control-bar-border-bottom` | var(--zg-control-bar-border, 1px solid var(--theme-border-color)) | Styles the bottom border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/CWVOSQC7) |
| `--zg-control-bar-border-left` | var(--zg-control-bar-border, 0) | Styles the left border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/QOCRCDUO) |
| `--zg-control-bar-border-right` | var(--zg-control-bar-border, 0) | Styles the right border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/ZUGS5N4E) |
| `--zg-control-bar-border-top` | var(--zg-control-bar-border, 0) | Styles the top border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/UBYLTINT) |
| `--zg-control-bar-layout-content` | "" | Sets the before 'content' of inner layout container | [Example code](https://app.zingsoft.com/demos/embed/MXM9N5T5) |
| `--zg-control-bar-layout-justify-content` | flex-end | Sets the horizontal alignment of contents in inner layout container | [Example code](https://app.zingsoft.com/demos/embed/RY0BD0RX) |
| `--zg-control-bar-margin` | 0 | Sets the margin of control-bar | [Example code](https://app.zingsoft.com/demos/embed/S6MYCHEP) |
| `--zg-control-bar-min-height` | 30px | Sets the min-height of control bar | [Example code](https://app.zingsoft.com/demos/embed/9RT1IX7I) |
| `--zg-control-bar-padding` | 2px var(--theme-padding_x) 2px calc(var(--theme-padding_x) - 6px) | Sets the padding of control-bar | [Example code](https://app.zingsoft.com/demos/embed/WR596XPW) |
| `--zg-control-bar-visibility` | visible | Sets the visibility of component | [Example code](https://app.zingsoft.com/demos/embed/NMVK94RD) |

## CSS Selector

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

```css
zg-control-bar {
  border: 1px solid red;
}
```

## CSS Shadow Parts

`<zg-control-bar>` exposed elements within the shadow can be styled by CSS shadow parts, like so:

```css
zg-control-bar::part(control-bar) {
  background-color: red;
}
```

Below is a list of all the associated ZGControlBar 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 |
| --- | --- |
| `batch-message` | Container for the batch editing status message. |
| `card-action` | Container for the card action controls. |
| `control-bar` | Control-bar container. |
| `layout` | Container for the layout controls. |
| `row-action` | Container for the row action controls. |

## Slots

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