> For the complete documentation index, see [llms.txt](https://docs.cspr.click/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cspr.click/cspr.click-sdk/integration/legacy-csprclick-ui/customizing-the-top-bar/custom-selector.md).

# Custom selector

<figure><img src="/files/OmIlfeCzVpPUPr3hBk2F" alt=""><figcaption></figcaption></figure>

In addition to the standard settings selectors described in the previous pages, you can define your own dropdown menus with the options your application requires.

The code below shows an example with a menu that allows to choose between three different tokens:

```tsx
const TOKENS: CustomTopBarMenuItem[] = [
  {title:'Token 1', icon: <LogoGreen/>  },
  {title: 'Token 2', icon: <LogoYellow/>},
  {title: 'Token 3', icon: <LogoOrange/> }
];

const tokenSettings = {
    items: TOKENS,
    currentItem: currentToken,
    onItemSwitch: (t: string) => {
      // update your app upon item change
    },
};
```

```tsx
<ClickUI
    topBarSettings={{
        customTopBarMenuSettings:[tokenSettings]
    }}
/>
```