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

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

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>
  );
};

.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;
    }
  }
}

import { AppMenu } from "./components/AppMenu";

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

Emoji Picker

Hide Channel History For Newly Added Members