---
title: Header
url: https://docs.kaltura.com/docs/embeddable-kaltura-products/media-manager/header
---


## Header

The header sits above the table and can include filters, an upload button, a status indicator, and breadcrumbs. It is configured via the `header` property inside `context`.

```js
settings: {
  context: {
    type: 'myMedia',
    header: {
      type: 'default',
      filters: { /* ... */ },
      upload: { /* ... */ },
      status: { /* ... */ },
    },
  },
}
```

### Filters

A search box and media-type filter chips can be added:

```js
header: {
  type: 'default',
  filters: {
    show: true,
    items: [
      { type: 'predefined', subType: 'freeText' },
      { type: 'predefined', subType: 'media-types', include: ['video', 'image'] },
    ],
  },
}
```

| Filter | Description |
|---|---|
| `freeText` | Free-text search input |
| `media-types` | Type filter chips. Use `include` to limit which types appear (`'video'`, `'image'`, `'audio'`, `'document'`) |

Omitting `items` displays all predefined filters with their defaults. Setting `show: false` hides filters entirely.

### Upload button

To show the upload button in the header:

```js
header: {
  type: 'default',
  upload: { show: true },
}
```

Accepted file types can be restricted by passing bare extensions (without a leading dot):

```js
upload: { show: true, allowedUploadExtensions: ['mp4', 'mov', 'png', 'jpg'] }
```

For upload lifecycle details, see [Uploads](/docs/embeddable-kaltura-products/media-manager/uploads).

### Status indicator

A library item count badge can be displayed:

```js
header: {
  type: 'default',
  status: { show: true },
}
```

### Breadcrumbs (category context only)

When using `type: 'category'`, folder navigation breadcrumbs can be enabled:

```js
settings: {
  context: {
    type: 'category',
    initialCategoryId: '12345',
    header: {
      type: 'default',
      breadcrumbs: { show: true, rootLabel: 'Media Library' },
    },
  },
}
```

| Field | Description |
|---|---|
| `breadcrumbs.show` | Show/hide the breadcrumb trail |
| `breadcrumbs.rootLabel` | Label for the root node |

### Full header example

```js
header: {
  type: 'default',
  filters: {
    show: true,
    items: [
      { type: 'predefined', subType: 'freeText' },
      { type: 'predefined', subType: 'media-types', include: ['video', 'image', 'audio'] },
    ],
  },
  upload: { show: true, allowedUploadExtensions: ['mp4', 'png', 'jpg'] },
  status: { show: true },
}
```