# 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 |

---

This page was last updated at 2025-08-15T14:15:59.478Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v11/components/utility-components/channel_header/](https://getstream.io/chat/docs/sdk/react/v11/components/utility-components/channel_header/).