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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-header.md
mode: provenance
representation: markdown
origin_response_id: 1aa904bd3c1ec29500fad97b40df050f
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.766Z
version_nonce: fd523db51ab9a1203d038c8cabc87f1b
generated_at_utc: 2026-10-31T09:20:24.323Z
response_nonce: 56e5a3ab2a8e2efae06ad9286f64aae9
```

# `<zg-header>`

Version 1

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

The `<zg-header>` is a web component that is the semantic container placed at the top of the grid to hold various grid items. `<zg-header>` is created internally and **should not be placed directly in the user's HTML**. You can style the `<zg-header>` through CSS variables or the `zg-header` CSS selector.

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

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated | n/a |
| [ZGCaption](https://www.zinggrid.com/docs/api/tags/zg-caption) | Child | Generated | n/a |
| [ZGControlBar](https://www.zinggrid.com/docs/api/tags/zg-control-bar) | Child | Generated | n/a |
| [ZGSource](https://www.zinggrid.com/docs/api/tags/zg-source) | Child | Generated | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-caption>`](https://www.zinggrid.com/docs/api/tags/zg-caption/)
- [`<zg-control-bar>`](https://www.zinggrid.com/docs/api/tags/zg-control-bar/)

## Usage

A `<zg-header>` tag can be manually inserted inside the grid as slotted content. The header is styleable via CSS variables or the `zg-header` CSS selector.

```html
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-header>Hello world</zg-header>
</zing-grid>
```

## Attributes

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

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

```css
:root {
--zg-header-background: red;
}
```

Below is a list of all the associated `--zg-header` 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-header-background` | Browser's default value | Styles the background of header | [Example code](https://app.zingsoft.com/demos/embed/RNK9KGL1) |
| `--zg-header-border` | 0 | Styles the border of header | [Example code](https://app.zingsoft.com/demos/embed/D3AD1LTZ) |
| `--zg-header-border-bottom` | var(--zg-header-border, 0) | Styles the bottom border of header | [Example code](https://app.zingsoft.com/demos/embed/ZOYVLTTM) |
| `--zg-header-border-left` | var(--zg-header-border, 0) | Styles the left border of header | [Example code](https://app.zingsoft.com/demos/embed/AMLDCFOE) |
| `--zg-header-border-radius` | 0 | Applies border radius to header | [Example code](https://app.zingsoft.com/demos/embed/J5P8R36J) |
| `--zg-header-border-right` | var(--zg-header-border, 0) | Styles the right border of header | [Example code](https://app.zingsoft.com/demos/embed/XCB64506) |
| `--zg-header-border-top` | var(--zg-header-border, 0) | Styles the top border of header | [Example code](https://app.zingsoft.com/demos/embed/7UN98I97) |

## CSS Selector

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

```css
zg-header {
  background: red;
}
```

## Slots

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