# Custom selector

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-e6022ae0a35063ae93d0d7ddfcb5ca62ea09295e%2Ftoken-selector.png?alt=media" 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]
    }}
/>
```