LogoLogo
CSPR.build PortalCSPR.click Website
CSPR.click v1.3
CSPR.click v1.3
  • Introduction
    • CSPR.click overview
    • Get your application Id
    • Changelog
  • UI SDK
    • Getting started with the template application
    • Integrating the UI SDK into your application
    • Integrating the UI SDK into a non-React application
    • Customizing the top bar
      • Account dropdown menu
      • Theme selector
      • Network selector
      • Language selector
      • Currency selector
      • Custom selector
    • useClickRef() hook
    • Handling events
    • Signing transactions
  • Core JS SDK
    • Getting started
    • Properties
    • Methods
    • Types
    • Events
  • Get support
    • Contact us
Powered by GitBook
On this page
  1. UI SDK
  2. Customizing the top bar

Custom selector

PreviousCurrency selectorNextuseClickRef() hook

Last updated 11 months ago

You can add additional dropdown menus to the top bar with your custom options.

The code below shows how to add a custom menu with three token choices:

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]
}}
/>