# ChannelHeader

`ChannelHeader` displays the active channel’s image and title.

## Best Practices

- Keep `ChannelHeader` lightweight; move heavy logic to parent components.
- Rely on channel name/image defaults unless you need explicit overrides.
- Use a custom header only when you need additional controls or layout changes.
- Ensure `MenuIcon` is accessible and indicates navigation state on mobile.
- Use the `live` indicator only for truly real-time channels.

## Basic Usage

Render it under `Channel`. To override it, render your own header instead.

**Example 1**

```tsx
<Channel channel={channel}>
  <ChannelHeader live={true} title={"General"} />
</Channel>
```

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

```tsx
<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

Shows a small live indicator below the title if the channel is live.

| 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 2026-04-22T16:43:03.281Z.

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