# App Menu

As of v10.0.0, you can add an app menu to the `SearchBar`. To display a menu button next to the search input, pass an [`AppMenu` component](/chat/docs/sdk/react/v13/components/utility-components/channel_search#appmenu/) to `ChannelSearch`. The menu toggles when the button is clicked. You can render it as a dropdown or modal; this example uses a dropdown.

## Best Practices

- Provide your own `AppMenu` styles to match your app’s UI.
- Keep menu actions minimal and high-frequency.
- Close the menu on selection to avoid lingering overlays.
- Ensure menu positioning handles small screens and scroll containers.
- Consider keyboard and focus handling for accessibility.

<admonition type="warning">

The SDK does not provide a default `AppMenu`, so you must supply your own styles.

</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;
    }
  }
}
```

```tsx {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-04-21T07:55:45.604Z.

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