# useChannelDetailsNavigationItems

A hook that builds the navigation rows rendered by the navigation section of [`ChannelDetails`](/chat/docs/sdk/react-native/ui-components/channel-details/) — the entry points to the [`PinnedMessageList`](/chat/docs/sdk/react-native/ui-components/pinned-message-list/), [`MediaList`](/chat/docs/sdk/react-native/ui-components/media-list/) and [`FileAttachmentList`](/chat/docs/sdk/react-native/ui-components/file-attachment-list/). It returns the items as a plain array; the section component owns the built-in modal and supplies the default open-modal behavior for any row without a custom `onPress`.

## Best Practices

- Customize rows by passing `getNavigationItems`, mapping over `defaultItems` to set a row's `onPress` (e.g. to push your own screen) or to add/remove rows.
- Leave a row's `onPress` unset to keep its built-in modal behavior — including sections added in future SDK versions.
- Use the already-translated `label` on `defaultItems` instead of re-translating section names.
- Keep your `getNavigationItems` reference stable (memoize it) to avoid unnecessary recomputation.
- Identify rows by `section` rather than by index, since the order can change.

## Parameters

The hook accepts a single options object.

| Parameter            | Description                                                                                                                                                            | Type                               |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| `getNavigationItems` | Customizes the navigation rows. Receives the built-in `defaultItems` (and a `context`) and returns the rows to render. Defaults to returning `defaultItems` unchanged. | `GetChannelDetailsNavigationItems` |

The `GetChannelDetailsNavigationItems` callback receives:

| Property       | Description                                    | Type                                   |
| -------------- | ---------------------------------------------- | -------------------------------------- |
| `context`      | Carries the translation function `t`.          | `ChannelDetailsNavigationItemsContext` |
| `defaultItems` | The built-in navigation rows, in render order. | `ChannelDetailsNavigationItem[]`       |

## Return type

Returns an array of `ChannelDetailsNavigationItem`, each describing one row.

### `Icon`

Icon rendered at the start of the row and reused in the built-in modal header.

| Type                             |
| -------------------------------- |
| `React.ComponentType<IconProps>` |

### `label`

Already-translated label rendered for the row and its built-in modal header.

| Type     |
| -------- |
| `string` |

### `section`

Identifies which section the row represents. The built-in sections are `pinned-messages`, `photos-and-videos` and `files`; custom rows can use any string.

| Type                                  |
| ------------------------------------- |
| `ChannelDetailsNavigationSectionType` |

### `onPress`

Fired when the user taps the row. Leave unset to keep the built-in modal behavior; set it to route the row elsewhere.

| Type         |
| ------------ |
| `() => void` |

## Example usage

```tsx
import {
  ChannelDetails,
  GetChannelDetailsNavigationItems,
} from "stream-chat-react-native";

const getNavigationItems: GetChannelDetailsNavigationItems = ({
  defaultItems,
}) =>
  defaultItems.map((item) =>
    item.section === "files"
      ? { ...item, onPress: () => navigation.navigate("ChannelFiles") }
      : item,
  );

const ChannelDetailsScreen = () => (
  <ChannelDetails getNavigationItems={getNavigationItems} />
);
```


---

This page was last updated at 2026-06-30T12:00:25.993Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/hooks/channel-details/use-channel-details-navigation-items/](https://getstream.io/chat/docs/sdk/react-native/hooks/channel-details/use-channel-details-navigation-items/).