LogoLogo
CSPR.build PortalCSPR.click Website
CSPR.click (latest)
CSPR.click (latest)
  • Documentation
    • Introduction
    • Overview
    • Getting started
    • Changelog
  • CSPR.click SDK
    • React
      • Handling events
      • Connecting a wallet
      • Signing transactions
      • Customizing the top bar
        • Account dropdown menu
        • Theme selector
        • Network selector
        • Language selector
        • Currency selector
        • Custom selector
      • Hooks and Components
    • JavaScript
      • Handling events
      • Connecting a wallet
      • Signing transactions
      • Customizing the top bar
        • Account dropdown menu
        • Theme selector
        • Network selector
      • Examples
    • Reference
      • Properties
      • Methods
      • Types
      • Events
  • Get support
    • Contact us
Powered by GitBook
On this page
  1. CSPR.click SDK
  2. React
  3. Customizing the top bar

Custom selector

Last updated 1 year ago

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:

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
    },
};
<ClickUI
    topBarSettings={{
        customTopBarMenuSettings:[tokenSettings]
    }}
/>