---
id: app_menu
title: App Menu
---

# Adding an 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](../../components/utility-components/channel-search.mdx/#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.

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

```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
import { AppMenu } from './components/AppMenu';

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