# App Menu

As of the version 10.0.0, users can add app menu into the `SearchBar`. In case you would like to display menu button next to the search input, you can do that by adding [`AppMenu` component](/chat/docs/sdk/react/v11/components/utility-components/channel-search#appmenu/) to the `ChannelSearch` props. The display of `AppMenu` is then toggled by clicking on the menu button. `AppMenu` can be rendered as a drop-down or even a modal. In our example we will render a drop-down menu.

<admonition type="warning">

The SDK does not provide any default `AppMenu` component and so you will have to write your CSS for it to be styled correctly.

</admonition>

```tsx
import React, { useCallback } from "react";
import type { AppMenuProps } from "stream-chat-react";

import "./AppMenu.scss";

export const AppMenu = ({ close }: AppMenuProps) => {
  const handleSelect = useCallback(() => {
    // custom logic...
    close?.();
  }, [close]);

  return (
    <div className="app-menu__container">
      <ul className="app-menu__item-list">
        <li className="app-menu__item" onClick={handleSelect}>
          Profile
        </li>
        <li className="app-menu__item" onClick={handleSelect}>
          New Group
        </li>
        <li className="app-menu__item" onClick={handleSelect}>
          Sign Out
        </li>
      </ul>
    </div>
  );
};
```

```scss
.str-chat__channel-search-bar-button.str-chat__channel-search-bar-button--menu {
  position: relative;
}

.app-menu {
  &__container {
    position: absolute;
    top: 50px;
    left: 10px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
  }

  &__item-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__item {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem;

    &:hover {
      background-color: lightgrey;
      cursor: pointer;
    }
  }
}
```

```jsx {6}
import { AppMenu } from "./components/AppMenu";

const App = () => (
  <Chat client={chatClient}>
    <ChannelList additionalChannelSearchProps={{ AppMenu }} showChannelSearch />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);
```


---

This page was last updated at 2026-05-22T16:32:11.175Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v11/guides/customization/app-menu/](https://getstream.io/chat/docs/sdk/react/v11/guides/customization/app-menu/).