---
id: channel_header
title: ChannelHeader
---

The `ChannelHeader` component displays pertinent information regarding the currently active channel, including image and title.

## Basic Usage

Use this component by adding it as a child of the `Channel` component. If you want to 'override' this component, you simply use your custom component instead.

**Example 1**

```jsx
<Channel channel={channel}>
  <ChannelHeader live={true} title={'General'} />
</Channel>
```

**Example 2** - using a custom heading component.

```jsx
<Channel channel={channel}>
  <YourCustomChannelHeader />
</Channel>
```

## Props

### Avatar

A custom UI component to display the avatar image.

| Type      | Default                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------- |
| component | [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) |

### image

The displayed image URL for the header, defaults to the `channel` image if there is one.

| Type   | Default             |
| ------ | ------------------- |
| string | the `channel` image |

### live

A boolean for showing a little indicator below the title if the `channel` is live right now.

| Type    |
| ------- |
| boolean |

### MenuIcon

A custom UI component to display menu icon.

| Type      | Default                                                                                                       |
| --------- | ------------------------------------------------------------------------------------------------------------- |
| component | [MenuIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelHeader/icons.tsx) |

### title

A string to set the title manually, defaults to the `channel` name if there is one.

| Type   | Default            |
| ------ | ------------------ |
| string | the `channel` name |
